AngularJS：NG-如果检查模型值，但只设置输入模式值，如果输入是$有效 [英] AngularJS: ng-if checking model value, but model value of input set only if input is $valid

问题描述

下面是我想做什么：

• 我有两个输入一个表单输入邮件，另一种是输入密码。


• 有所谓的形式在$范围内的对象


• 这两个输入有NG-模式指令（NG-模型=form.input_name）


• 我想做出一个图标旁边出现仅如果事情是在输入
输入的输入

• 那图标有连接到清除输入（使用angularjs锤的指令，'NG抽头）的行动。


• 要检查输入设置，使图标显示我用NG-IF =form.input_name.length> 0。


• 的事情是，输入的模型值只有当输入为$有效的，所以我的电子邮件输入只有当什么类型的输入有一个有效的电子邮件格式显示在图标的设置（[e-mail]）

有没有一种方法来检查对输入的角度值NG-如果还是有制作的图标出现更好的解决方案？

Is there a way to check the view value of the input on the ng-if or is there a better solution for making the icon appear?

这里的code我使用（与CSS类略）：

Here's the code i'm using(with css classes omitted):

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

-function to clear input in coffeescript

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

这对密码输入工作正常（因为它没有验证）。
感谢您的阅读。

This works fine for the password input (since it has no validation). Thanks for reading.

推荐答案

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

Browser validation will keep the internal value of the input empty until it passes the validation. In this case, an email validation. This means that what the user see and what JS see is different!

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

You can check the form input's $viewValue and show if it has a length > 0. You will have to name your form (which you already had) and each input (which I added). Also you can access each value by 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="email" 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抽头

Also, you can avoid the clearContent function by setting the field [to an empty string] directly in the hm-tap

这篇关于AngularJS：NG-如果检查模型值，但只设置输入模式值，如果输入是$有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！