日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

使用Angular FormBuilder初始化新建FormGroup

作者:wllzhk 更新時間: 2022-08-30 編程語言

FormBuilder可以幫助我們簡單優雅的新建FromGroup,并且允許對每個controller設置驗證規則。本文將展示其基本用法。
首先讓我們對比FormBuilder與傳統方法,以展示其優越性
傳統方法:

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. 導入
import { FormBuilder } from '@angular/forms'
  1. 依賴注入
constructor(private formBuilder: FormBuilder) {
}
  1. 使用
this.contactForm = this.formBuilder.group({
  firstname: [''],
  lastname: [''],
  email: [''],
  gender: [''],
  isMarried: [''],
  country: [''],
});

也可以添加一個或多個驗證規則(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]],
});

快快用起來吧!

原文鏈接:https://blog.csdn.net/wllzhk/article/details/126336950

欄目分類
最近更新