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

Setting input field value through JQuery makes required validation fail on AngularJS

本文关键字：失败 验证 AngularJS 设置 JQuery 输入 字段 通过      更新时间：2023-09-26

我有一个标记为必需的输入字段，如果用户触摸了该字段但没有提供值，或者表单已提交，则会显示一条验证消息。它非常有效。

如果我用程序设置字段的值（例如使用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">

我本可以为此创建一个浮游生物或小提琴手，但我无法将Angular Messages模块挂在上面。

这对我有效：

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

角度1.3.14

相关文章：