AngularJS：NG-如果检查模型值，但只设置输入模式值，如果输入是$有效

这是我想做什么：

我有两个输入的形式之一是键入“电子邮件“，另一种是输入”密码“。
有所谓的形式在$范围
两个输入有NG-模型指令（NG-模型=“form.input_name”）
我想让旁边的图标看起来只有当有些事情在打字输入的对象在输入
该图标有一个附加动作来清除输入（使用angularjs hammer的指令'ng-tap'）。
要检查输入是否设置并使图标显示，我使用ng-if =“form.input_name.length> 0”。
问题是，输入的模型值仅在输入为$ valid时设置，因此对于我的电子邮件输入，只有在输入内容上输入了有效的电子邮件格式（[email protected]）。

有没有办法检查输入的视图值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 = ""

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

来源

2013-09-16 rodrigo.botti

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

来源

2013-09-16 14:37:16 TheSharpieOne

感谢字段设置[为空字符串]避免clearContent功能，即工作！需要注意的一点是，如果我使用'form-login'而不是'formLogin'作为表单名称，那么ng-if指令不会出于某种原因。我不知道它需要命名约定。抱歉没有为您的帖子btw投票+1。我刚刚创建了我的帐户，因此我没有足够的投票声望。 –

变数名称中不允许使用连字符/破折号，尽管它们可以在可以将密钥作为字符串传递的键中使用。表单名实际上是'$ scope'对象中的一个键，所以它是允许的，但是在模板中使用Angular解析它是另一个问题，它会从'form'中减去'login'。 – TheSharpieOne

AH，我没有想到使用$ viewValue。很好。收回我的答案。 –

AngularJS：NG-如果检查模型值，但只设置输入模式值，如果输入是$有效

回答

相关问题