### ng-zorro-antd 表单条件必填校验及动态验证方法 在使用 `ng-zorro-antd` 的表单组件时，可以通过动态调整 `Validators` 或者结合自定义校验器实现条件必填校验。以下是实现方法的详细说明： #### 1. 动态调整 Validators 通过监听字段值的变化，动态地添加或移除必填校验逻辑。可以使用 `FormControl` 的 `setValidators` 和 `updateValueAndValidity` 方法来实现。 ```typescript import { FormBuilder, FormGroup, Validators } from '@angular/forms'; export class AppComponent { validateForm: FormGroup; constructor(private fb: FormBuilder) { this.validateForm = this.fb.group({ type: [null], // 字段类型 value: [null, []] // 需要条件必填的字段 }); // 监听字段类型变化 this.validateForm.get('type').valueChanges.subscribe(type => { const valueControl = this.validateForm.get('value'); if (type === 'required') { valueControl.setValidators([Validators.required]); // 添加必填校验 } else { valueControl.clearValidators(); // 移除所有校验 } valueControl.updateValueAndValidity(); // 更新校验状态 }); } } ``` 上述代码中，当字段 `type` 的值发生变化时，会根据其值动态调整字段 `value` 的校验规则[^1]。 #### 2. 自定义校验器 如果需要更复杂的条件校验逻辑，可以编写自定义校验器。以下是一个示例： ```typescript import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; export function conditionalRequiredValidator(controlName: string): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const dependentControl = control.parent?.get(controlName); if (dependentControl && dependentControl.value === 'required') { return Validators.required(control); // 如果依赖字段为'required'，则执行必填校验 } return null; // 否则不进行校验 }; } // 在表单中使用自定义校验器 this.validateForm = this.fb.group({ type: [null], value: ['', conditionalRequiredValidator('type')] // 使用自定义校验器 }); ``` 此方法允许根据其他字段的值动态决定当前字段是否需要必填校验[^2]。 #### 3. 结合 JSON Schema 实现配置化校验 为了减少重复性工作，可以参考 JSON Schema 的思想，通过配置文件描述表单结构和校验规则。例如： ```json { "fields": [ { "name": "type", "type": "select", "options": ["optional", "required"] }, { "name": "value", "type": "text", "validators": [ { "condition": "type === 'required'", "validator": "required" } ] } ] } ``` 通过解析上述配置，可以动态生成表单并绑定相应的校验逻辑[^4]。 #### 4. 示例代码 以下是一个完整的示例，展示如何结合动态校验和自定义校验器实现条件必填校验： ```typescript import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', template: ` <form [formGroup]="validateForm"> <nz-form-item> <nz-form-label nzRequired>字段类型</nz-form-label> <nz-form-control> <nz-select formControlName="type"> <nz-option *ngFor="let option of options" [nzValue]="option" [nzLabel]="option"></nz-option> </nz-select> </nz-form-control> </nz-form-item> <nz-form-item> <nz-form-label nzRequired>字段值</nz-form-label> <nz-form-control> <input nz-input formControlName="value" /> <div *ngIf="validateForm.get('value').invalid">请输入值</div> </nz-form-control> </nz-form-item> </form> ` }) export class AppComponent { validateForm: FormGroup; options = ['optional', 'required']; constructor(private fb: FormBuilder) { this.validateForm = this.fb.group({ type: ['optional'], value: [''] }); this.validateForm.get('type').valueChanges.subscribe(type => { const valueControl = this.validateForm.get('value'); if (type === 'required') { valueControl.setValidators([Validators.required]); } else { valueControl.clearValidators(); } valueControl.updateValueAndValidity(); }); } } ``` 上述代码展示了如何通过监听字段值的变化动态调整校验规则，并结合 `ng-zorro-antd` 的表单组件实现条件必填校验[^3]。 --- ###