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