Chargement de l'image après la validation du formulaire - javascript, angularjs

Je veux afficher une image lorsque tous les éléments d'un form passe la validation, c’est-à-dire que tout le formulaire est valide.

Définition de l'image:

<div id="c3" ng-hide="myvalue" class="ng-hide" >
<img src="/images/D:/AngularJS/images/Assets/compleated .png"/>
</div>

Déclaration de forme et validation:

<!-- NAME -->
<div class="form-group" ng-class="{ "has-error" : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>

<!-- USERNAME -->
<div class="form-group" ng-class="{ "has-error" : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>

<!-- EMAIL -->
<div class="form-group" ng-class="{ "has-error" : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" >
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
</form>

Script angulaire:

validationApp.controller("mainController", function($scope) {
// function to submit the form after all validation has occurred
$scope.myvalue=true;
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
$scope.myvalue=false;
}
};
});

Réponses:

Vous pouvez faire comme ça en utilisant ng-show sur l'image en vérifiant si le formulaire est valide ou non par userForm.$valid (Vous n’avez pas besoin d’un contrôleur pour cela):

<form name="userForm">
<img src="/images/http://myimage.png" ng-show="userForm.$valid" />

<!-- Your elements -->
</form>

Voir le code de travail ci-dessous. Lorsque toutes vos validations, comme tous les champs, sont obligatoires, que les critères de courrier électronique et de longueur appropriés dans le nom d’utilisateur sont corrects, une image s’affiche en haut, c’est-à-dire lorsque votre formulaire est valide.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form name="userForm" class="container" ng-app>
<img src="/images/https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-10-512.png" ng-show="userForm.$valid" width="100px" />

<!-- NAME -->
<div class="form-group" ng-class="{ "has-error" : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>

<!-- USERNAME -->
<div class="form-group" ng-class="{ "has-error" : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>

<!-- EMAIL -->
<div class="form-group" ng-class="{ "has-error" : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" required>
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
</form>

 var app = angular.module("app", []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

<form name="form">
Name*<input type="text" ng-model="name" name="name" required />
</form>
<img ng-show="form.name.$valid" ng-src="/images/http://i.huffpost.com/gen/1068997/images/o-JASON-PRIESTLEY-facebook.jpg" />
</div>

Cela marche:

<form name="form">
<input type="text" ng-model="name" name="name" required />
</form>
<img ng-show="form.name.$valid" ng-src="/images/http://i.huffpost.com/gen/1068997/images/o-JASON-PRIESTLEY-facebook.jpg" />