本章中介紹響應式表單的創(chuàng)建及表單輸入值的校驗,對于模板表單就略過。

一、使用響應式表單的步驟

1、在模塊(一般是app.module.ts)中引入ReactiveFormsModule
2、在組件的ts文件中使用響應式表單

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';export class ReactiveFormComponent implements OnInit {  private myForm: FormGroup;  constructor(private fb: FormBuilder) {    this.createForm();  }  ngOnInit() {  }  // 創(chuàng)建表單元素  createForm() {    this.myForm = this.fb.group({      username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],      mobile: ['', [Validators.required]],      password: this.fb.group({        pass1: [''],        pass2: ['']      })    });  }  // 提交表單函數(shù)  postDate() {    /**     * valid:是否有效     * invalid:無效     * dirty:臟     * status:狀態(tài)     * errors:顯示錯誤     */    if(this.myForm.valid){      console.log(this.myForm.value);    }  }}

3、在組件的html頁面中使用

<form [formGroup]="myForm" (ngSubmit)="postDate()">  <div class="form-group">    <label for="username">用戶名:</label>    <input type="text" placeholder="請輸入用戶名" class="form-control" id="username" formControlName="username" />  </div>  <div class="form-group">    <label for="mobile">手機號碼:</label>    <input type="text" placeholder="請輸入手機號碼" class="form-control" id="mobile" formControlName="mobile"/>  </div>  <div formGroupName="password" style="border:none;">    <div class="form-group">      <label>密碼:</label>      <input type="password" class="form-control" placeholder="請輸入密碼" formControlName="pass1" />    </div>    <div class="form-group">      <label>確認密碼:</label>      <input type="password" class="form-control" placeholder="請再次輸入密碼" formControlName="pass2" />    </div>  </div>  <div class="form-group">    <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />  </div></form>

二、使用表單校驗數(shù)據(jù)

1、angular中自帶了三個常見的表單校驗的是在Validators中的required,minLength,maxLength
2、自定義表單校驗器(其實就一個函數(shù),函數(shù)的參數(shù)是當前需要校驗的行,返回一個任意對象)

**格式**export function fnName(control:FormControl|FormGroup):any{}

3、響應式表單字段中可以寫三個值,第一個是返顯到頁面上的,第二個參數(shù)是校驗器(可以是一組),第三個參數(shù)異步校驗(常見判斷手機號碼,用戶名是否重復注冊)

三、自定義一個校驗方法的步驟

1、把項目中需要用的校驗器單獨寫一個文件