AngularJS + Bootstrap-验证文本框-仅在用户输入一些数据后如何显示验证反馈？

Question

我正在对文本框进行一些验证。 用户输入有效的输入后，文本框应变为绿色，并且刻度线应出现在最右角。 同样，如果用户输入了无效的数据，则文本框应变为红色，而应显示一个叉号。

为此，我使用了引导程序的“ has-error has-feedback'和'has-success has-feedback' css类。

我的问题是，即使首次加载页面时，文本框也为绿色且有一个勾号。 我需要仅在用户输入输入后才显示验证反馈。 当表单用于编辑现有记录时，也是如此。 我该如何实现？ （我不确定是否可以使用$dirty和'$ pristine`解决此问题）

以下是我的标记。

<div class="form-group" ng-class="(Form.emailAddress.$valid) ? 'has-success has-feedback': 'has-error has-feedback'">
    <label for="emailAddress">Email address</label>
    <span ng-show="!Form.emailAddress.$valid">Please enter a valid address</span>

    <input type="email" class="form-control" id="emailAddress" name="emailAddress" ng-model="Data.emailAddress" ng-pattern="validationPattern" ng-maxlength="20">

    <span ng-show="Form.emailAddress.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
    <span ng-show="!Form.emailAddress.$valid" class="glyphicon glyphicon-remove  form-control-feedback"></span>
</div>

有关此主题的其他几个问题。

我也想检查电子邮件的最大长度，如果超过20，我想显示一个不同的消息。 我尝试了Form.emailAddress。$ maxlength，但无法正常工作。 maxlength是否也适用于“电子邮件”类型？

用户移至下一个文本框后，而不是在键入时显示它，如何显示反馈？ 可能类似于jquery的'focusout（）'。

我在控制器中使用了验证模式，因为电子邮件不是必填字段，但是在输入时必须有效。 请问是否有比这更好的方法？

任何帮助将非常感激。 谢谢

Answer 1

您必须将$ valid && $ dirty用于绿色，并在单独的检查中将$ invalid和$ dirty用于红色。

这是一个示例： http : //plnkr.co/edit/k8X5NSeUrBb2nqA9yD9F

<form name="myform">
  Valid: {{myform.myinput.$valid}}<br/>
  Dirty: {{myform.myinput.$dirty}}<br/>
  <input type="text" 
         name="myinput" 
         required 
         ng-model="myvalue" 
         ng-class="{'has-success has-feedback': \
                     myform.myinput.$valid && myform.myinput.$dirty, \
                    'has-error has-feedback': \
                     myform.myinput.$invalid && myform.myinput.$dirty}"></input>
</form>