javascript - 为什么 myForm.$submitted 不适用于 ng-messages 而适用于 ng-if？

Question

我正在尝试在有按键以及提交时验证我的表单。为此，我正在编写这段代码:-

<form name="myForm" ng-submit="submit()" novalidate>
    <input type="email" name="email" ng-model="email" required/>
    <div ng-messages="myForm.$submitted">
        <span ng-message="required">Please enter details in these field</span>
        <span ng-message="email">Please enter email</span>
    </div>
    <button type="submit">Save</button>
</form>

提交函数中有一条成功消息:-

$scope.submit = function(){
   console.log("Update Successful");
}

即使我没有填写必填字段并按“保存”，我仍然会收到“更新成功”消息。那么，为什么验证不起作用，为什么即使验证失败也提交功能。

我还找到了这些解决方案:-

<form name="myForm" ng-submit="myForm.$valid && submit()"  novalidate>
    <input type="email" name="email" ng-model="email" required/>
    <div ng-messages="myForm.email.$error" ng-if="myForm.$submitted">
        <span ng-message="required">Please enter details in these field</span>
        <span ng-message="email">Please enter email</span>
    </div>
    <button type="submit">Save</button>
</form>

这工作正常，但问题是，它也应该在按键上验证。但是，它只在我至少提交一次表单之后在按键验证不起作用之前在按键上验证。我应该如何解决这些问题？我也在尝试 myForm.$touched 但当我将它用作 :-

<div ng-messages="myForm.$touched">
    ...
</div>

Answer 1

在实现 AngularJS 的表单验证时，您遗漏了一些东西。

从您提供的代码来看，您的表单似乎正在使用默认的 HTML5 表单验证和NOT AngularJS 表单验证。

如何？

为了能够连接 AngularJS 表单验证(技术上将其作为属性添加到 form 指令)，除了 name 属性表单控件，ng-model 属性也是必需的。

同时，要禁用 HTML5 默认验证行为，必须将 novalidate 属性添加到表单标签。

为了能够从表单中实现预期的行为(即在按键和提交时进行验证，如果我是对的)，您可以实现 yourForm. $dirty 和 yourForm.$submitted 属性:

<div ng-messages="myForm.email.$error" ng-if="myForm.$dirty || myForm.$submitted">
    <p ng-message="required">Please enter details in these field</p>
    <p ng-message="email">Please enter email</p>
</div>

Demo