javascript - 表单元素值更改后的 Angular JS 验证

Question

这是我在这里的第一篇文章，我想知道你们是否可以帮助我。

现在我正在使用 AngularJS，但我遇到了验证问题，正如您在此链接中看到的 http://jsfiddle.net/ANxmv/1488/

问题是当您单击“设置”按钮时，输入字段会更改为默认电子邮件，但 angular 不会触发验证。

但是如果你点击输入(没有删除它)并修改它，验证器工作正常。

有没有办法在不操纵输入的情况下进行验证？

这是 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

这不起作用，因为您直接从元素访问/更改它的值，所以 angular 不知道该更改，因此绑定(bind)不起作用，而是使用 $scope 以便 angular 可以跟踪变化。

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