问题在于您只将初始值传递给 linkFieldValidator 函数。
为了动态获得值，您可以通过FormGroup 传递linkFieldValidator，如下所示：
readonly formGroup = this.formBuilder.group(
{
checkbox: '',
name: ''
},
{ validator: linkedFieldValidator }
);
完整样本：
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormGroup,
ValidationErrors,
ValidatorFn,
} from '@angular/forms';
export const linkedFieldValidator = (formGroup: FormGroup): ValidationErrors | null => {
const [checkboxFormControlValue, nameFormControlValue] = [
formGroup.get('checkbox')!.value,
formGroup.get('name')!.value
];
return checkboxFormControlValue && !nameFormControlValue
? { linkedField: { value: nameFormControlValue } }
: null;
};
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'input-overview-example',
styleUrls: ['input-overview-example.css'],
templateUrl: 'input-overview-example.html'
})
export class InputOverviewExample {
readonly formGroup = this.formBuilder.group(
{
checkbox: '',
name: ''
},
{ validator: linkedFieldValidator }
);
constructor(private readonly formBuilder: FormBuilder) {}
}
DEMO
编辑 1：
如果您需要将错误驻留在每个表单控件中，您可以将 linkedFieldValidator 更改为：
export const linkedFieldValidator = (formGroup: FormGroup): null => {
const { value: checkboxFormControlValue } = formGroup.get('checkbox')!;
const inputFormControls = [
formGroup.get('input1')!,
formGroup.get('input2')!,
formGroup.get('input3')!,
];
inputFormControls.forEach(inputFormControl => {
const { value } = inputFormControl;
const errors = checkboxFormControlValue && !value ? { linkedField: { value } } : null;
inputFormControl.setErrors(errors);
});
return null;
};
注意，如果需要保留其他错误，可能需要在setErrors之前进行一些处理。
DEMO
编辑 2：
对于可以有多个链接字段的通用方法，您可以执行以下操作：
type LinkedFormControl = Record<string, string | readonly string[]>;
const arrayify = <T>(itemOrItems: T | readonly T[]): readonly T[] => {
return Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
};
const getErrorObjectSanitized = <T extends object>(obj: T): T | null => {
return Object.keys(obj).length === 0 ? null : obj;
};
const getErrorsFor = (
checkerValue: boolean,
formControl: FormControl,
): object | null => {
const { errors, value } = formControl;
const { error, ...oldErrors } = errors || {};
const processedErrors = {
...(checkerValue && !value ? { error: true } : {}),
...oldErrors,
};
return getErrorObjectSanitized(processedErrors);
};
export const linkedFieldValidator = (linkedFormControls: LinkedFormControl) => {
return (formGroup: FormGroup): ValidationErrors | null => {
Object.keys(linkedFormControls).forEach(key => {
const { value: checkerValue } = formGroup.get(key)!;
const dependentKeys = arrayify(linkedFormControls[key]);
dependentKeys
.map(dependentKey => formGroup.get(dependentKey)!)
.forEach((dependentFormControl: FormControl) => {
dependentFormControl.setErrors(
getErrorsFor(checkerValue, dependentFormControl),
);
});
});
return null;
};
};
...调用会是这样的：
{
validator: linkedFieldValidator({
car: ['license_plate', 'mileage'],
hair: 'hair_color',
}),
},
DEMO