Javascript AngularJS+；引导-验证文本框-如何仅在用户输入某些数据后显示验证反馈？

我正在对文本框进行验证。用户输入有效输入后，文本框应变为绿色，并在最右角显示勾号。同样，如果用户输入了无效数据，则文本框应变为红色，并显示一个十字

为此，我使用了bootstrap的“

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（）”类似

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

---

任何帮助都将不胜感激。谢谢

绿色必须使用$valid&&$dirty，红色必须使用$invalid和$dirty

下面是一个例子：

有效：{{myform.myinput.$Valid}}

脏：{{myform.myinput.$Dirty}}

您必须使用$valid&&$dirty作为绿色，在单独的检查中，使用$invalid和$dirty作为红色

下面是一个例子：

有效：{{myform.myinput.$Valid}}

脏：{{myform.myinput.$Dirty}}

您是否尝试过（Form.emailAddress.$valid&&Form.emailAddress.$dirty），因此该字段只有在脏且有效时才为绿色？是的。我尝试了ng class=“（contactDetailsForm.emailAddress.$valid）&&contactDetailsForm.emailAddress.$dirty？”“has success has feedback”“：“has error has feedback”“”，但在加载页面时，默认情况下文本框变为红色。您需要两个单独的检查$valid&&$dirty用于检查绿色，单独的$invalid&&$dirty用于检查红色。那么，我应该在ng类中使用三元操作吗？您能用一个例子来展示它吗？您是否尝试过（Form.emailAddress.$valid&&Form.emailAddress.$dirty），因此如果字段是脏的和有效的，则该字段仅为绿色？是的。我尝试了ng class=“（contactDetailsForm.emailAddress.$valid）&&contactDetailsForm.emailAddress.$dirty？”“has success has feedback”“：“has error has feedback”“”，但在加载页面时，默认情况下文本框变为红色。您需要两个单独的检查$valid&&$dirty用于检查绿色，单独的$invalid&&$dirty用于检查红色。那么，我应该在ng类中使用三元操作吗？你能举个例子吗？谢谢。你的答案看起来很有希望。我要试一试。$invalid和$error.maxlength对input type=“email”也起作用吗？如果查看角度代码，电子邮件输入类型将扩展文本输入类型。所以，所有对文本输入有效的东西都应该对电子邮件输入有效。谢谢。你的答案看起来很有希望。我要试一试。$invalid和$error.maxlength对input type=“email”也起作用吗？如果查看角度代码，电子邮件输入类型将扩展文本输入类型。因此，任何对文本输入有效的东西都应该对电子邮件输入有效。

<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>