AngularJS：ng-if 检查模型值，但仅当输入为 $valid 时才设置输入的模型值

Question

这是我想做的：

• 我有一个包含两个输入的表单，一个是“电子邮件”类型，另一个是“密码”类型。
• $scope 中有一个名为 form 的对象
• 两个输入都有 ng-model 指令 (ng-model="form.input_name")
• 我想让一个图标出现在输入旁边，只有在输入中输入了某些内容时
• 该图标附加了一个清除输入的操作（使用 angularjs 锤子的指令“ng-tap”）。
• 要检查输入是否设置并显示图标，我使用 ng-if="form.input_name.length>0"。
• 问题是，输入的模型值仅在输入为 $valid 时才设置，因此对于我的电子邮件输入，该图标仅在输入中键入的内容具有有效的电子邮件格式 (a@a.com) 时才会出现.

有没有办法检查 ng-if 上输入的视图值，或者有没有更好的解决方案让图标出现？

这是我正在使用的代码（省略了 css 类）：

-HTML:

<form name="form-login">
  <input placeholder="email" type="email" ng-model="form.email" required>
  <i hm-tap="clearContent('email')",ng-if="form.email.length>0">

  <input placeholder="password" type="email" ng-model="form.passwd" required>
  <i hm-tap="clearContent('passwd')",ng-if="form.passwd.length>0">
</form>   

-清除coffeescript中的输入的功能

$scope.clearContent = (fieldName) ->
      switch fieldName
        when 'passwd' then $scope.form.passwd = ""
        when 'email' then $scope.form.email = "" 

这适用于密码输入（因为它没有验证）。 感谢阅读。

Answer 1

浏览器验证将保持输入的内部值为空，直到它通过验证。在这种情况下，电子邮件验证。这意味着用户看到的和JS看到的不一样！

您可以检查表单输入的$viewValue 并显示它的长度是否 > 0。您必须命名您的表单（您已经拥有）和每个输入（我添加的）。您也可以通过FORMNAME.INPUTNAME.$viewValue 访问每个值。

<form name="formLogin">
    <input placeholder="email" type="email" name="email" ng-model="form.email" required /> <i hm-tap="form.email = ''" ng-if="formLogin.email.$viewValue.length>0">!</i>
    <input placeholder="password" type="password" name="passwd" ng-model="form.passwd" required /> <i hm-tap="form.passwd = ''" ng-if="formLogin.passwd.$viewValue.length>0">!</i>
</form>

示例：http://jsfiddle.net/TheSharpieOne/6M5JX/1/

另外，您可以通过直接在hm-tap 中设置字段[为空字符串] 来避免clearContent 函数