问题的解决方法是使用ngOnChanges钩子,并在新值被检测到时手动更新FormControl的值。下面是示例代码:
@Component({
selector: 'app-custom-input',
template:
,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
],
})
export class CustomInputComponent implements ControlValueAccessor, OnChanges {
@Input() placeholder: string;
@Input() disabled: boolean;
@Output() valueChange = new EventEmitter
ngOnChanges(changes: SimpleChanges) { if (changes.value && changes.value.currentValue !== this.value) { this.value = changes.value.currentValue; this.onChange(this.value); this.valueChange.emit(this.value); } }
writeValue(value: string) { this.value = value; }
registerOnChange(fn: (value: string) => void) { this.onChange = fn; }
registerOnTouched(fn: () => {}) { this.onTouched = fn; }
onBlur() { this.onTouched(); } }
使用上面的代码,就可以在使用自定义mat-input组件时更新FormGroup中FormControl的值。