angular表单验证

修炼爱情 發表於 2020-8-4 20:55:00

<h5>1、添加form标签</h5>
1、页面中添加form标签，并为form标签添加一个指令 #form=”ngForm”（#后的表单名称是自定义的，这里是为在表单提交的时候，按钮禁用做准备）
<div class="cnblogs_code">
<pre><form (ngSubmit)="btnHandle('login')" #loginForm="ngForm"></form></pre>
</div>
<h5>2、form标签内input输入框的属性</h5>
2.1、给form标签下所有input标签添加name属性，不然控制台会报错，报错信息是让添加name属性或者是添加=”{standalone : true}” 2.2、使用[(ngModel)]双向绑定数据，并通过#（需要验证字段的名称，这里也是自定义的）=”ngModel”，来指向绑定的输入框。添加需要校验的正则表达式，pattern=”^1\d{9}$”,如果是必填项，添加required属性。
<div class="cnblogs_code">
<pre><input type="number" [(ngModel)]="loginData.telphone" pattern="^1\d{9}$" placeholder="请输入手机号" required #mobile="ngModel" name="loginData.telphone" /></pre>
</div>
<h5>3、添加校验信息</h5>
3.1、通过 ngModel 跟踪修改状态与有效性验证，在表单中使用 ngModel 可以获得比仅使用双向数据绑定更多的控制权。它还会告诉你很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？NgModel 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。可以利用这些 CSS 类来修改控件的外观，显示或隐藏消息。
<img src="https://i.loli.net/2019/11/22/BrCpchfqFOUTais.png" alt="image.png">
3.2、往 input标签上添加名叫 spy 的临时模板引用变量，然后用这个 spy 来显示它上面的所有 CSS 类。
<div class="cnblogs_code">
<pre> <div class="input_item">
 <p>手机号</p>
 <input type="number" [(ngModel)]="loginData.telphone" pattern="^1\d{9}$" placeholder="请输入手机号" required #mobile="ngModel" name="loginData.telphone" #spy />
</div>
<div>{{spy.className}}</div></pre>
</div>
（1）未进行任何操作的时候 <img src="https://i.loli.net/2019/11/22/FdLHqcElOXhRevj.png" alt="微信图片_20191122182433.png"> （2）输入符合pattern格式的内容 <img src="https://img2020.cnblogs.com/blog/2082206/202104/2082206-20210422135712117-1872823372.png" alt="" loading="lazy">
 
 
 3.3、通过检查输入内容的invalid、dirty、touched，来校验数据的有效性
<div class="cnblogs_code">
<pre><div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)" class="dhl_error">
<div *ngIf="mobile.errors.required">
 {{validator.validate.errorMsg.tel.empty}}
</div>
<div *ngIf="mobile.errors.pattern">
 {{validator.validate.errorMsg.tel.error}}
</div>
</div></pre>
</div>
这里的校验信息，在服务里面定义了相应的错误提示语,可以全局共享 <img src="https://i.loli.net/2019/11/22/jpsuZglV5w6XcyD.png" alt="image.png">
<h5>4、禁用按钮</h5>
4.1、通过定义的表单名称.form.valid的反值来禁用提交按钮，如果输入的内容都有效，这个值为true，按钮才可以点击。
<div class="cnblogs_code">
<pre> <button ="!loginForm.form.valid" class="dhl_red_btn">登录</button></pre>
</div>
4.2、在form标签中直接提交表单，用（ngSubmit）来处理表单提交事件。 <img src="https://i.loli.net/2019/11/22/VZch5vbJ2tH16Ga.png" alt="image.png">
<h5>5、小结</h5>
完整代码如下：
<div class="cnblogs_code">
<pre><form (ngSubmit)="btnHandle('login')" #loginForm="ngForm">
<div class="border_bottom">
 <div class="input_item">
 <p>手机号</p>
 <input type="number" [(ngModel)]="loginData.telphone" pattern="^1\d{9}$" placeholder="请输入手机号" required #mobile="ngModel" name="loginData.telphone" #spy />
 </div>
 <div class="fontmedium padding15 fontSize16">{{spy.className}}</div>
 <div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)" class="dhl_error">
 <div *ngIf="mobile.errors.required">
 {{validator.validate.errorMsg.tel.empty}}
 </div>
 <div *ngIf="mobile.errors.pattern">
 {{validator.validate.errorMsg.tel.error}}
 </div>
 </div>
 </div>
<div class="button">
 <button ="!loginForm.form.valid" class="dhl_red_btn">登录</button>
 <a routerLink="/register"><button class="register dhl_border_btn">注册</button></a>
 </div>
</form></pre>
</div>
  
来源：https://www.cnblogs.com/liyfya/p/13435853.html

頁: [1]

琼殿技术论坛's Archiver

angular表单验证