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>