3

这是我想做的：

  • 我有一个有两个输入的表单，一个是“电子邮件”类型，另一个是“密码”类型。
  • $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 = ""

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

4

1 回答 1

10

浏览器验证将保持输入的内部值为空，直到它通过验证。在这种情况下，电子邮件验证。这意味着用户看到的和 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/

此外，您可以clearContent通过直接在hm-tap

于 2013-09-16T14:37:16.260 回答