Зареждане на изображението след валидиране на формуляра succedded - javascript, angularjs

Искам да покажа изображение, когато всички елементи в a form преминава валидирането, т.е. цялата форма е валидна.

Определяне на изображението:

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

Деклариране на формуляр и потвърждаване:

<!-- 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>

Ъглови скрипт:

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;
}
};
});

Отговори:

Можете да направите подобно нещо, като използвате ng-show върху изображението проверява дали формулярът е валиден или не от userForm.$valid (Нямате нужда от контролер за това, за да постигнете това):

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

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

Вижте работния код по-долу. Когато всичките ви проверки като всички полета са задължителни, правилните критерии за имейл и дължина в потребителското име са верни, ще видите изображение в горната част, т.е. когато формулярът ви е валиден.

<!-- 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>

Това работи:

<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" />