模板驱动表单-Agnular高级编程(5)
发布于 2020-12-31 22:37
Angular表单分为模板驱动表单和响应式表单。模板驱动表单采用ngModel对模板控件和组件变量进行绑定，适用于格式固定的表单。响应式表单使用FormGroup, FormControl，FormArray,FormBuilder 等类构建出数据对象，数据源操作和表单验证在组件逻辑中进行，适合格式不固定的表单。
要使用模板驱动表单，首先要在app.module.ts中引入FormsModule
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule, FormsModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }
然后在模板中使用[(ngModel)]关联组件变量。这里使用form构建了一个表单。novalidate表示我们自己进行验证，不使用html5默认的表单验证。ngSubmit是一个表单提交事件，响应组件中的onSubmit方法。在表单内部，input我们双向绑定了组件内部的变量str，并放置了内置的验证器required,表示这个字段必填，还有minlength验证器，表示最少要填入3个字符。注意这里要用name属性指定控件的名称，这是Angular内部逻辑的需要。
<form novalidate (ngSubmit)="onSubmit()"><div><input name="name" [(ngModel)]="str" required minlength="3"/><span> {{ str }} </span></div><div><button type="submit"> 提交 </button></div></form>
然后我们运行程序，在浏览器F12界面检查input元素，会发现如果输入3个或以上字符，input的class为ng-dirty ng-touched ng-valid，如果输入的字符少于3个，class则为ng-dirty ng-touched ng-invalid。Angular自动加上的这些类说明如下：
| ng-untouched ng-touched | 一旦元素被访问过，则为ng-touched |
| ng-pristine ng-dirty | 元素有过更改，则为ng-dirty |
| ng-valid ng-invalid | 元素如果不满足验证规则，则为ng-invalid |
然后我们在app.component.css中增加以下样式，就可以看到错误时的红框。
input.ng-dirty.ng-invalid{border: 2px solid red;}input.ng-dirty.ng-valid{border: 2px solid green;}
默认验证器包括如下
| required | 必填项 |
| minlength | 指定最少字符数 |
| maxlength | 指定最多字符数 |
| pattern | 输入必须匹配正则表达式 |
上面的例子只是显示红色，但要获取具体的错误类型和信息，需要在input控件上指定一个模板引用变量，并赋值为ngModel。这样通过访问模板引用变量的errors属性，就可以获取错误具体信息。
<form novalidate (ngSubmit)="onSubmit()"><div><input name="name" #name="ngModel" [(ngModel)]="str" required minlength="3"/><span> {{ str }} </span></div><div><button type="submit"> 提交 </button></div><div *ngIf="name.dirty && name.invalid && name.errors.required">需要输入值</div><div *ngIf="name.dirty && name.invalid && name.errors.minlength">最少输入字符：{{ name.errors.minlength.requiredLength }}</div></form>
模板引用变量有如下验证属性
| path | 返回元素名称 |
| valid | 验证通过，则为true |
| invalid | 验证不通过，则为true |
| prinstine | 内容未更改过，则为true |
| dirty | 内容更改过，则为true |
| touched | 用户访问过此元素，为true |
| untouched | 用户未访问过该元素，为true |
| errors | 验证不通过时，返回一个对象，描述错误的信息 |
| value | 元素value值 |
其中errors属性包括
| required | 必填项没有填写 |
| minlength.requiredLength | 返回满足minLength所需的字符数 |
| minlength.actualLength | 用户实际输入字数 |
| pattern.requiredPattern | 返回pattern的正则表达式 |
| pattern.actualValue | 返回元素内容 |
除了对单个控件进行验证之外，还可以对整个表单进行验证。这时需要对表单form元素指定一个模板引用变量，赋值ngForm，在组件文件中，通过访问form模板变量的valid属性，判断表单中是否有没有验证通过的控件。只有全部控件都验证通过，form的valid属性才是true。
// app.component.html<form novalidate...
//app.component.tsimport { Component } from '@angular/core';import {NgForm} from "@angular/forms";@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {str = '';onSubmit(form){if(form.valid){console.log('valid'); //如果表单验证通过，控制台就会输出valid}else{form.reset();}}}
本文来自网络或网友投稿，如有侵犯您的权益，请发邮件至：aisoutu@outlook.com 我们将第一时间删除。
相关素材