javascript - AngularJS 对单个元素进行多重验证以及无需验证

Question

我正在构建一个表单并使用内置的 AngularJSvalidations 对象来验证表单。我有以下表格:

<form name="myForm" ng-submit="DoSomething()" novalidate>
            <textarea name="EmailTo" required="" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailTo"></textarea>
            <textarea name="EmailCC" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailCC"></textarea>
            <textarea name="EmailBCC" required="" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailBCC"></textarea>
</form>

我显示的错误消息如下:

<ul>
      <li ng-if="!myForm.EmailTo.$valid">Please enter email To</li>
      <li ng-if="!myForm.EmailCC.$valid">Please enter email CC</li>
      <li ng-if="!myForm.EmailBCC.$valid">Please enter email BCC</li>
</ul>

在上面的表单中，EmailTo和EmailBCC是强制性的，因此我在它们和EmailCC<上添加了required属性 不是强制性的，因此它没有 required 属性。我有两个问题:

1. 由于 EmailCC 不是强制性的，如果用户在其中输入任何值，如何在不添加 required 属性的情况下验证它？
2. 如何为 required 和 ng-pattern 验证显示单独的消息？当 EmailTo 字段为空时显示一条消息，当输入的电子邮件无效时显示另一条消息？

编辑:

我已经使用 $valid 和 $untouched 的组合声明了消息，以便在字段为空和字段无效时显示消息，如下所示:

<li ng-if="myForm.EmailTo.$untouched">Please enter email To</li>
<li ng-if="(!myForm.EmailTo.$untouched && myForm.EmailTo.$invalid)">Please enter valid emails seaparated by ';' in email To</li>

上述无效消息仅在控件失去焦点(onblur)时显示，而不是在keypress上显示，我希望有效消息在keypress上显示 而不是当控制失去焦点时。此外，当我将控件设置为空时，仍然显示无效消息而不是空消息。如何解决这个问题？

Answer 1

1)对于你的第一个问题:

In AngularJS inputs have the following states:

• $untouched The field has not been touched yet
• $touched The field has been touched
• $pristine The field has not been modified yet
• $dirty The field has been modified
• $invalid The field content is not valid
• $valid The field content is valid

Source: https://www.w3schools.com/angular/angular_validation.asp

您可以在 Controller 中使用类似以下内容检查 EmaillCC 输入是否原始:

var isEmailCCPristine = $scope.myForm.EmailCC.$pristine;

2)通过在列表项中放置正确的条件ng-if:

<li ng-if="myForm.EmailTo.$untouched">Please enter email To</li>
<li ng-if="myForm.EmailTo.$invalid">Please enter a valid email To</li>

我没有测试，但您可能需要根据您的需要调整此代码块。