Angular8 简单表单验证的实现示例

<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]
  });
 }

<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;
 }

}