FormBuilder可以幫助我們簡(jiǎn)單優(yōu)雅的新建FromGroup，并且允許對(duì)每個(gè)controller設(shè)置驗(yàn)證規(guī)則。本文將展示其基本用法。
首先讓我們對(duì)比FormBuilder與傳統(tǒng)方法，以展示其優(yōu)越性
傳統(tǒng)方法：

validateForm = new FormGroup({
    firstname: new FormControl(null, [Validators.required]),
    lastname: new FormControl(null, [Validators.required]),
    email: new FormControl(null, [Validators.required])
  });

使用FormBuilder：

this.contactForm = this.formBuilder.group({
  firstname: [null, [Validators.required]],
  lastname: [null, [Validators.required]],
  email: [null, [Validators.required]]
});

使用方法

1. 導(dǎo)入

import { FormBuilder } from '@angular/forms'

2. 依賴注入

constructor(private formBuilder: FormBuilder) {
}

3. 使用

this.contactForm = this.formBuilder.group({
  firstname: [''],
  lastname: [''],
  email: [''],
  gender: [''],
  isMarried: [''],
  country: [''],
});

也可以添加一個(gè)或多個(gè)驗(yàn)證規(guī)則(validatiors)

this.contactForm = this.formBuilder.group({
  firstname: ['', [Validators.required, Validators.minLength(10)]],
  lastname: ['', [Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]],
  email: ['', [Validators.required, Validators.email]],
  gender: ['', [Validators.required]],
  isMarried: ['', [Validators.required]],
  country: ['', [Validators.required]],
});

快快用起來吧！