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

Question

这是我想做的:

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

有没有办法检查 ng-if 上输入的 View 值，或者是否有更好的解决方案来显示图标？

这是我正在使用的代码(省略了 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 函数