Угловая проверка JS после изменения значения элемента формы

Question

Это мой первый пост здесь, и мне интересно, можете ли вы, ребята, помочь мне.

Сейчас я работаю с AngularJS, но у меня есть проблема с проверкой, как вы можете видеть в этой ссылке http://jsfiddle.net/ANxmv/1488/

Проблема в том, когда вы нажимаете на кнопку «Установить», изменение поля ввода с электронной почтой по умолчанию, но угловой не вызывает проверку.

Но если вы нажмете на вход (без его удаления) и измените его, валидатор работает нормально.

Есть ли способ проверки без манипуляции с вводом?

Вот HTML код:

<form name="form" ng-app> 
    <div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]"> 
     <label class="control-label" for="email">Your email address</label> 
     <p>Is it valid? {{form.email.$valid}} </p> 
     <div class="controls"> 
      <input type="email" name="email" value="123@has.com" ng-model="email" required/> 
       <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span> 
       <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span> 
      </div> 
     </div> 
     <div>   
      <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button> 
      <button class="btn btn-primary btn-large" onClick="set()" >Set</button> 
     </div> 
    </form> 

И Javascript:

var set = function(){ 
    var $form_1 = document.forms['form']; 
    $form_1.elements["email"].value = "123@default.com"; 
}; 

Answer 1

Это не работает, потому что вы обращаетесь/изменение значения непосредственно из элемента так угловом не знает о том, что изменить, поэтому привязка не работает, вместо этого использует $scope, так что угловой может отслеживать изменения.

HTML

<form name="form" ng-app="jsfiddle"> 
    <div ng-controller="MainCtrl" class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]"> 
     <p>Hello {{email}}!</p> 
     <label class="control-label" for="email">Your email address</label> 
     <p>Is it valid? {{form.email.$valid}} </p> 
     <div class="controls"> 
      <input type="email" name="email" value="123@has.com" ng-model="email" required/> 
      <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span> 
      <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span> 
     </div> 
     <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button> 
     <button class="btn btn-primary btn-large" ng-click="set()" >Set</button> 
    </div> 
</div> 
</form> 

JavaScript

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.set = function(){ 
    $scope.email = "123@default.com"; 
    }; 
}); 

JSFiddle link