Demo

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>

这很好但问题是，它也应该在keypress上验证。但是，它只能在按键验证不起作用后至少对表格进行一次总结后才能在按键上验证。我该如何解决这些问题？我也在尝试myForm。$触摸但是当我用它时，即使这样也行不通： -

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

Answer 1

试试这个：

在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;
}

Answer 2

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

根据您提供的代码，您的表单似乎使用默认的HTML5表单验证和 NOT AngularJS表单验证。

如何？

为了能够使用AngularJS表单验证（技术上将其作为属性添加到form指令），除了表单控件的name属性之外，{{1属性也是必需的。

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

为了能够从表单中实现您的预期行为（即按键验证和提交，如果我是对的话），您可以实现novalidate的组合和yourForm.$dirty属性：

yourForm.$submitted

为什么myForm。$提交不能使用ng-messages但是使用ng-if？

2 个答案:

如何？

Demo