AngularJS 表单验证问题答案

【问题标题】：AngularJS form validation issuesAngularJS 表单验证问题
【发布时间】：2015-10-09 17:20:31
【问题描述】：

我正在尝试使用 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.$valid = true”

猜猜我错过了什么。我需要包含任何模块吗？

这里是Plunker

【问题讨论】：

请查看：stackoverflow.com/a/31118444/1638718
Adding validation to text field from bootstrap or angularjs的可能重复

标签： javascript angularjs validation angularjs-validation angularjs-forms

【解决方案1】：

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

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

还有一件事，在表单元素中添加“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>

【讨论】：

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

【解决方案2】：

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

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="/^\S+@\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>

【讨论】：

谢谢，奇怪的是我们必须将它绑定到 ng-model 才能进行验证。

【解决方案3】：

好吧，我不确定，但我认为您还必须像这样将 $error 与 $dirty 一起使用：

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

【讨论】：

无论是否单独解决问题，这都是真的，只有在您触摸输入时才会显示检查 $dirty
@Sumit，你能创建一个 plunker 吗？