angular8使用响应式表单（ng-zorro组件）

// 在所用到表单的模块中导入
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

我的表单组件文件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-ledgers-statistics',
  templateUrl: './ledgers-statistics.component.html',
  styleUrls: ['./ledgers-statistics.component.scss']
})
export class LedgersStatisticsComponent implements OnInit {
  validateForm: FormGroup;
  // 自定义表单验证
  confirmValidator = (control: FormControl) => {
    if (!control.value) {
      return { error: true, required: true };
    } else if (control.value !== 'niuzai') {
      return { niuzai: true };
    }
    return {};
  }

  constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      userName: ['', [Validators.required, Validators.maxLength(12), Validators.minLength(6)]],
      mobile: ['', [Validators.required, Validators.pattern(/^1(3|4|5|6|7|8|9)\d{9}$/)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [this.confirmValidator]]
    });
  }

  ngOnInit() {
  }
  submit() {
    for (const key in this.validateForm.controls) {
      if (this.validateForm.controls.hasOwnProperty(key)) {
       this.validateForm.controls[key].markAsDirty();  // 将所有表单控件标记为已修改
       this.validateForm.controls[key].updateValueAndValidity();  // 重新计算表单控件的值和验证状态（校验表单）
        console.log(this.validateForm.controls[key]);
        // console.log(this.validateForm.controls[key].hasError('minlength'));
      }
    }
    console.log(this.validateForm.valid);
  }
}

<form nz-form  [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="5">自定义</nz-form-label>
    <nz-form-control nzHasFeedback [nzSpan]="12" [nzErrorTip]="combineTpl">
      <input nz-input formControlName="userName" required />
      <ng-template #combineTpl let-control>
        <ng-container *ngIf="control.hasError('maxlength')">MaxLength is 12</ng-container>
        <ng-container *ngIf="control.hasError('minlength')">MinLength is 6</ng-container>
        <ng-container *ngIf="control.hasError('required')">必填字段</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5">手机</nz-form-label>
    <nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="格式错误">
      <input nz-input formControlName="mobile" name="maxlength" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5">邮箱</nz-form-label>
    <nz-form-control nzHasFeedback [nzSpan]="12" [nzErrorTip]="aa">
      <input nz-input formControlName="email" />
      <ng-template #aa let-control>
        <ng-container *ngIf="control.hasError('email')">邮箱格式错误</ng-container>
        <ng-container *ngIf="control.hasError('required')">必填字段</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5">密码</nz-form-label>
    <nz-form-control nzHasFeedback [nzSpan]="12" [nzErrorTip]="name">
      <input nz-input formControlName="password" />
      <ng-template #name let-control>
        <ng-container *ngIf="control.hasError('niuzai')">不是牛仔</ng-container>
        <ng-container *ngIf="control.hasError('required')">必填字段</ng-container>
      </ng-template>
      
    </nz-form-control>
  </nz-form-item>
  <button (click)="submit()">提交</button>
</form>