输入类型不验证 AngularJs Html 中的验证答案

【问题标题】：Input type not validate Validation in AngularJs Html输入类型不验证 AngularJs Html 中的验证
【发布时间】：2018-04-06 10:44:11
【问题描述】：

在 Angularjs 表单中验证电子邮件 ID 和密码不起作用。请检查下面的代码 sn-p。

    <div class="field_w3ls">
        <div class="field-group">                     
            <input type="text" name="email"  placeholder="Email" id="email" class="form-control" ng-model="email"  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required />
            <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span>
        </div>
    </div>
    <div class="field_w3ls"> 
        <div class="field-group">                       
            <input type="password" name="password"  placeholder="Password" id="password" class="form-control" ng-model="password" required />
            <span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>       
        </div>
    </div>

但是当我们删除 ng-model 时它工作正常。我是 AngularJs 的新手。

提前致谢！！

【问题讨论】：

标签： html css angularjs bootstrap-4 angularjs-ng-model

【解决方案1】：

在表单标签中提供 novalidate，请检查此代码

    <form name="form" novalidate>
    <div class="field_w3ls">
            <div class="field-group">                     
                <input type="text" name="email"  placeholder="Email" id="email" class="form-control" ng-model="email"  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required/>     
                <span ng-if="form.email.$dirty && form.email.$invalid" class="help-block">
                  <span ng-show="form.email.$error.required">Email is required</span>
                  <span ng-show="form.email.$error.pattern">Invalid email</span>
                </span>
            </div>
        </div>
        <br/>
        <div class="field_w3ls"> 
            <div class="field-group">                       
                <input type="password" name="password"  placeholder="Password" id="password" class="form-control" ng-model="password" required />
                <span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>             
<span ng-if="form.password.$dirty && form.password.$invalid" class="help-block">
               <span ng-show="form.password.$error.required">password is required
</span>
                </span>
            </div>
        </div>
    </form>

** 在控制器中给**

$scope.email = '';
$scope.password = '';

【讨论】：

【解决方案2】：

将您的表单命名为name="loginForm"，并在表单电子邮件字段中检查$invalid，因为您要验证所需的和模式。

<form name="loginForm" novalidate>
    <div class="field_w3ls">
        <div class="field-group">                     
            <input type="text" name="email"  placeholder="Email" id="email" class="form-control" ng-model="email"  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required />
            <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            <span ng-show="loginForm.email.$dirty && loginForm.email.$invalid" class="help-block">Email is required</span>
        </div>
    </div>

    <div class="field_w3ls"> 
        <div class="field-group">                       
            <input type="password" name="password"  placeholder="Password" id="password" class="form-control" ng-model="password" required />
            <span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>       
        </div>
    </div>
</form>

【讨论】：

谢谢您的宝贵建议！！