Angular8 簡單表單驗證

簡單表單校驗

傻瓜式校驗

直接複製Antd中demo

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input your username!">
      <nz-input-group nzPrefixIcon="user">
        <input formControlName="userName" nz-input placeholder="Username" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input your Password!">
      <nz-input-group nzPrefixIcon="lock">
        <input formControlName="password" nz-input type="password" placeholder="Password" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control>
      <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
    </nz-form-control>
  </nz-form-item>
</form>

validateForm!: FormGroup;

  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      userName: [null, [Validators.required]],
      password: [null, [Validators.required]],
      remember: [true]
    });
  }

此類表單校驗較爲單一，或者要求比較低，一般即爲required校驗，錯誤信息提示也多爲固定不變。

智能化校驗

表單一旦開始有具體的細節校驗或者複雜的業務參雜，校驗提示必須準確、清晰。
userName爲例，除了爲必填項，必然須要符合某種格式，亦或是指定郵箱格式等，那麼校驗必須同時反映出錯誤類型，本例假設用戶名有長度要求進行演示。

<nz-form-control [nzErrorTip]="getErrTipByField('userName')">
      <nz-input-group nzPrefixIcon="user">
        <input formControlName="userName" nz-input placeholder="Username" />
      </nz-input-group>
    </nz-form-control>

export class SimpleFormComponent implements OnInit {
  validateForm: FormGroup;
  errMessageMap = {};

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.errMessageMap = {
      userName: {
        required: 'please input your name!',
        minlength: 'please input at least least 5 character'
      },
      password: {
        required: 'please input your password!'
      }
    };
    this.validateForm = this.fb.group({
      userName: [null, [Validators.required, Validators.minLength(5)]],
      password: [null, [Validators.required]],
      remember: [true]
    }, { updateOn: 'change' });
  }
  submitForm(): void {
    if (this.validateForm.controls) {
      for (const i in this.validateForm.controls) {
        if (this.validateForm.controls[i]) {
          this.validateForm.controls[i].markAsDirty();
          this.validateForm.controls[i].updateValueAndValidity();
        }
      }
    }
  }
  getErrTipByField(fieldName) {
    const errors = this.validateForm.get(fieldName).errors;
    let errMsg = '';
    for (const key in errors) {
      if (errors.hasOwnProperty(key)) {
        errMsg += this.errMessageMap[fieldName][key];
      }
    }
    return errMsg;
  }

}

構建出一個數據對象，以知足不一樣字段下不一樣錯誤類型的錯誤提示，根據業務需求，決定是否顯示所有錯誤信息或者按照業務優先級顯示。

其它細節

表單校驗時機能夠設置，默認爲change,可選blur 、submit
表單驗證正確的，想要提示勾號能夠添加屬性 nzHasFeedback

submit中那段代碼是從新對錶單進行驗證了，通常驗證中是不須要的，動態表單驗證後續結合自定義表單服務進行演示。