validation问题使用angularjs(红色边框在Firefox上显示)?
我从对象做了一个简单的表单..现在我validation该表单。我在validation时遇到了一些问题。请在firefox上检查这个。
- 当我写入需要的时候,我的字段变成了红色(在input字段上是红色的边框),运行应用程序后显示“请input有效的电子邮件”,当用户将一个字段移动到另一个字段时,该字段变为红色,我需要显示两条消息“请input电子邮件”与“请input有效的电子邮件”我怎么能做到这一点?
我学习了很多的教程,但我应用这个东西$脏,$原始,但没有为我工作..我学习从那里validation.. http://scotch.io/tutorials/javascript/angularjs-form-validation
<ul ng-repeat="input in inputs"> <li><span>{{input.name}} : </span> <div ng-switch="input.type" ng-form="myfrm"> <div ng-switch-when="text"> <input type="text" ng-model="outputs[input.name]"/> </div> <div ng-switch-when="email" class="form-group" > <input type="email" ng-model="outputs[input.name]" name="input" ng-required="input.required"> <P ng-show="myfrm.input.$invalid && !myform.input.$pristine">Please enter a valid email</P> </div> <div ng-switch-when="number"> <input type="number" ng-model="outputs[input.name]" ng-required="input.required" name="input"/> <P ng-if="myfrm.input.$invalid">Please enter a valid number</P> </div> <div ng-switch-when="url"> <input type="number" ng-model="outputs[input.name]"/> </div> <div ng-switch-when="checkbox"> <input type="checkbox" ng-model="outputs[input.name]" ng-checked="outputs[input.name]" value="outputs[input.name]"/> </div> </div> </li> </ul>
在你使用$pristine
地方有一个错字, myform
应该是你用ng-form
设置的myfrm
:
<p ng-show="myfrm.input.$invalid && !myfrm.input.$pristine">Please enter a valid email</p>
要显示不同的邮件无效的电子邮件和空的电子邮件,您可以使用$error
而不是像这样的$invalid
:
<p ng-show="myfrm.input.$error.email && !myfrm.input.$pristine">Please enter a valid email</p> <p ng-show="myfrm.input.$error.required && !myfrm.input.$pristine">Please enter the email</p>
示例Plunker: http ://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=preview