Question

我正在构建表单并使用内置的AngularJS验证对象来验证表单。我有以下表格：

<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是强制性的，因此我在其上添加了required属性，EmailCC不是强制性的，因此没有required 1}}属性就可以了。我有两个问题：

由于EmailCC不是强制性的，如果用户在其中输入任何值，如何在不添加required属性的情况下对其进行验证？
如何为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）关于你的第一个问题：

在AngularJS中，输入具有以下状态：


$未触及该字段尚未触及

$ touch该字段已被触及

$ pristine该字段尚未修改

$ dirty该字段已被修改

$ invalid字段内容无效

$ valid字段内容有效


来源：https://www.w3schools.com/angular/angular_validation.asp

您可以在控制器中检查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>

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

Answer 2

已有指令。您可以使用。链接：https://docs.angularjs.org/api/ngMessages/directive/ngMessages

示例：

ngMessages

AngularJS对单个元素的多次验证和验证，无需

2 个答案: