在Angular中,可以通过实现ControlValueAccessor接口来自定义表单控件,并在不通知更改的情况下验证初始值。下面是一个示例:
import { Component, forwardRef, HostBinding } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-input',
template: `
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
value: string;
onChange: (value: any) => void;
onTouched: () => void;
writeValue(value: any): void {
this.value = value;
}
registerOnChange(fn: (value: any) => void): void {
this.onChange = fn;
}
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
}
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
customControl: 'initial value'
});
}
}
在上面的示例中,formControlName
绑定到了自定义表单控件的属性customControl
,并设置了初始值为'initial value'。即使没有使用patchValue
或setValue
方法来更改值,初始值也会通过ControlValueAccessor接口的writeValue
方法传递给自定义表单控件。
这样,你就可以在不通知更改的情况下验证初始值了。