背景

有时我们需要根据不同的条件，决定表单控件是否是必填的。

代码示例

HTML文件

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="name">Name</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please input your name">
      <input type="text" nz-input formControlName="name" placeholder="Please input your name" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzFor="nickname" [nzRequired]="validateForm.get('required')?.value">Nickname</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please input your nickname">
      <input type="text" nz-input formControlName="nickname" placeholder="Please input your nickname" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzSpan]="8" [nzOffset]="4">
      <label nz-checkbox formControlName="required" (ngModelChange)="requiredChange($event)">Nickname is required</label>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzSpan]="8" [nzOffset]="4">
      <button nz-button nzType="primary">Check</button>
    </nz-form-control>
  </nz-form-item>
</form>

TS文件

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

@Component({
  selector: 'app-rule-validation',
  templateUrl: './rule-validation.component.html',
  styleUrls: ['./rule-validation.component.css']
})
export class RuleValidationComponent implements OnInit {
  validateForm!: FormGroup;

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

  requiredChange(required: boolean): void {
    if (!required) {
      this.validateForm.get('nickname')!.clearValidators();
      this.validateForm.get('nickname')!.markAsPristine();
    } else {
      this.validateForm.get('nickname')!.setValidators(Validators.required);
      this.validateForm.get('nickname')!.markAsDirty();
    }
    this.validateForm.get('nickname')!.updateValueAndValidity();
  }

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.validateForm = this.fb.group({
      name: [null, [Validators.required]],
      nickname: [null],
      required: [false]
    });
  }

}

module文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RuleValidationComponent } from './rule-validation.component';
import { NzFormModule } from 'ng-zorro-antd/form';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzButtonModule } from 'ng-zorro-antd/button';
import {NzCheckboxModule} from "ng-zorro-antd/checkbox";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

@NgModule({
  imports: [
    CommonModule,
    NzFormModule,
    FormsModule,
    ReactiveFormsModule,
    NzInputModule,
    NzButtonModule,
    NzCheckboxModule,
    BrowserAnimationsModule
  ],
  declarations: [RuleValidationComponent],
  exports:[RuleValidationComponent]
})
export class RuleValidationModule { }

效果图

参考链接

https://ng.ant.design/version/11.4.x/components/form/zh#components-form-demo-dynamic-rule