表单必填_模板驱动表单Agnular高级编程（5）

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="ngForm" (ngSubmit)="onSubmit(form)"> ...

//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();    }  }}