在Angular中,自定义表单组件的值不会立即反映到父表单组件的值,这是因为Angular的表单控件是基于Reactive Forms构建的,它遵循异步变更检测策略。
要解决这个问题,可以通过以下步骤来确保自定义表单组件的值在父表单组件中立即反映出来:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
Parent Value: {{ customControl.value }}
`
})
export class ParentComponent {
customControl = new FormControl('');
}
import { Component, forwardRef } 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: any = () => {};
writeValue(value: any): void {
this.value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
}
onChange()
方法来通知父组件。import { Component, forwardRef } 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: any = () => {};
writeValue(value: any): void {
this.value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
onChange(value: string) {
this.value = value;
this.onChange(value);
}
}
通过以上步骤,自定义表单组件的值将能够立即反映到父表单组件中。