Angular表單驗證器

爲何使用驗證器

用戶輸入的數據各式各樣,並不老是正確的,若是用戶輸入了錯誤的數據格式,那麼咱們但願給他們提供實時正確的反饋,而且阻止表單的提交.所以,咱們須要驗證器來處理這些狀況.

表單驗證

Angular支持的內置validate屬性：

• required- 設置表單控件值是非空的
• email - 設置表單控件的格式是email
• minlength - 設置表單控件值的最小長度
• maxlength - 設置表單控件長度的最大值
• pattern - 設置表單控件的值需匹配 pattern 對應的模式

經過表單控件的.valid判斷驗證結果，其結果狀態：

• valid - 有效
• invalid - 無效
• pristine - 表單值未改變
• dirty - 表單值已改變
• touched - 表單控件已被訪問過
• untouched- 表單控件未被訪問過

Angular驗證器 簡單實例

1.驗證器由Validators模塊提供,該模塊從'@angular/forms'中導出

import { Validators }from'@angular/forms'

2.使用驗證器的方法（實例）

export class AppComponent {

  constructor(private fb: FormBuilder) {

  }

  profileForm = new FormGroup({
    userName: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
  });

3.效果

最後，說起一下咱們團隊的黃庭祥，雖然跟我說的時候雲裏霧裏的，可是仍是感謝！！！