javascript - 通过 JQuery 设置输入字段值会使 AngularJS 上所需的验证失败

Question

我有一个标记为必填的输入字段，如果用户触摸该字段但未提供值或提交了表单，则会显示验证消息。效果很好。

如果我以编程方式为该字段设置一个值(例如使用 JQuery)，则仍会显示所需的消息。 这是我的代码

<form
    name="myForm"
    novalidate>
    <input
        id="myField"
        name="myField"
        ng-model="myField"
        type="text"
        required />
    <br />
    <div
        ng-messages="myForm.myField.$error"
        ng-if="myForm.myField.$touched || myForm.$submitted">
        <div ng-message="required">Required field</div>
    </div>
    <br />
    <input
        type="submit"
        value="Send" />
</form>

<script>
    $(function() {
        $('#myField').val("this is a value");
    });

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

    app.controller('MyCtrl', function MainCtrl() {
    });
</script>

为输入字段生成的 html 代码显示以下类:

<input id="myField" name="myField" ng-model="myField" type="text" required="" class="ng-pristine ng-invalid ng-invalid-required ng-touched">

我会为此创建一个 planker 或 fiddler，但我无法在这些上 Hook Angular 消息模块。

Answer 1

这对我有用:

$scope.$apply(function(){
  $scope.myForm.myField.$setValidity("required", true);
});

Angular 1.3.14