Angular JS表单验证不起作用

我想用角度js做一个简单的表单验证。但它似乎并没有工作，我没有得到我想念的东西。Angular JS表单验证不起作用

HTML

<form role="form" class="ng-pristine ng-valid" name="registerForm"> 
 
         <fieldset> 
 
          <div class="form-group"> 
 
           <input class="form-control" placeholder="First Name" name="firstname" type="text" 
 
             autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <input class="form-control" placeholder="Last Name" name="lastname" type="text" value=""> 
 
          </div> 
 
          <div class="form-group"> 
 
           <input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}"> 
 
           <div ng-show="registerForm.email.$dirty">Email Invalid</div> 
 
          </div> 
 
          <div class="form-group"> 
 
           <input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value=""> 
 
          </div> 
 
          <div class="form-group"> 
 
           <select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control"> 
 
            <option value="">-Select Organization Type-</option> 
 
           </select> 
 
          </div> 
 
          
 
          <input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/> 
 
          
 
         </fieldset> 
 
        </form>

现在的问题是，我期待，如果我开始输入无效的电子邮件，然后它会告诉我的错误消息“电子邮件无效”。但是这并没有发生。

还当我提交空白表格之前把调试，它说：“registerForm $有效=真正的”

任何猜我失去了什么。任何模块，我需要包括？

这是Plunker

来源

2015-07-20 Sumit

请检查：HTTP：//stackoverflow.com/a/31118444/1638718 – ozgur

的[从引导添加验证，文本字段可能重复或（http://stackoverflow.com/questions/31115604/adding-validation-to-text-field-from-bootstrap-or-angularjs） – ozgur

你错过了一堆东西。首先，您需要让您的字段与模型相关联，以便对其进行验证。其次，您访问错误的语法不正确。

Here is a working plunkr for what you are trying to do.

这是相关代码：

<body ng-controller="MainCtrl"> 
    <form role="form" name="registerForm" novalidate> 
    <fieldset> 
     <div class="form-group"> 
     <input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required /> 
     </div> 
     <div class="form-group"> 
     <input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value=""> 
     </div> 
     <div class="form-group"> 
     <input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\[email protected]\S+\.\S+$/i" required /> 
     </div> 
     <div class="form-group"> 
     <input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off"> 
     </div> 
     <div class="form-group"> 
     <input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value=""> 
     </div> 
     <div class="form-group"> 
     <select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control"> 
      <option value="">-Select Organization Type-</option> 
     </select> 
     </div> 

     <input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" /> 

    </fieldset> 
    </form> 

    <div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div> 
    <div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div> 

</body>

来源

2015-07-20 14:42:50

谢谢，我们不得不将它绑定到ng模型来验证工作。 – Sumit

好了，我不知道，但我想你也必须使用$错误与$脏这样的：

<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>

此外，添加NOVALIDATE禁用默认浏览器验证，如下所示：

<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>

来源

2015-07-20 14:32:09

nope不起作用:( – Sumit

无论单独解决，这都是真实的问题与否，只要检查$ dirty就会显示一旦你触摸输入 – aw04

@S忽略，你能创造一个蹲点吗？ –

首先，您需要registerForm.email.$error.email来触发“无效电子邮件”警报。

其次，我想你必须将这些输入字段与ng-model s绑定，但我不确定这是否有必要。

还有一件事，将“novalidate”添加到表单元素。

<div class="form-group"> 
     <input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" > 
     <div ng-show="registerForm.email.$error.email">Email Invalid</div> 
</div>

来源

2015-07-20 14:39:36 NeoWang

我们必须将输入字段与无模型绑定。 – Sumit

Angular JS表单验证不起作用

回答

相关问题