为什么myForm$提交的不适用于ng消息，但适用于ng if

Why does myForm.$submitted not work with ng-messages but with ng-if?

本文关键字：适用于 ng 消息 if 不适用 myForm 提交 为什么      更新时间：2023-09-26

当有按键时以及当表单提交时，我都在尝试验证我的表单。为此，我编写了以下代码：-

<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");
}

即使我没有填写必填字段并按Save，我仍然会收到"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$触摸，但即使这样也不起作用，当我使用它作为：-

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

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

从您提供的代码来看，您的表单似乎使用了默认的HTML5表单验证和NOTAngularJS表单验证。

如何

为了能够连接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>

演示

试试这个：

在html:中

<form name="myForm" novalidate>
    <input type="email" name="email" required/>
    <div ng-messages="myForm.email.$error" ng-if="myForm.email.$touched || valid">
        ...
    </div>
    <button ng-click="submit(myForm.$valid)">Save</button>
</form>

控制器内：

$scope.submit(valid)
{
    valid ? $scope.validCheck = false : $scope.validCheck = true;
}
相关文章：