在Angular中,自定义FormControl在FormGroup.reset()之后不更新视图的问题可以通过以下解决方法来解决:
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-custom-control',
template: `
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomControlComponent),
multi: true
}
]
})
export class CustomControlComponent implements ControlValueAccessor {
value: any;
onChange: any = () => {};
writeValue(value: any): void {
this.value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState?(isDisabled: boolean): void {}
}
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-custom-control',
template: `
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomControlComponent),
multi: true
}
]
})
export class CustomControlComponent implements ControlValueAccessor {
value: any;
onChange: any = () => {};
writeValue(value: any): void {
this.value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState?(isDisabled: boolean): void {}
reset(): void {
this.writeValue(null);
}
}
import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { CustomControlComponent } from './custom-control.component';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
form: FormGroup;
@ViewChild(CustomControlComponent) customControl: CustomControlComponent;
constructor() {
this.form = new FormGroup({
customControl: new FormControl()
});
}
resetForm(): void {
this.form.reset();
this.customControl.reset();
}
}
通过以上步骤,自定义FormControl在FormGroup.reset()之后将会更新视图。当调用FormGroup的reset()方法时,同时调用自定义FormControl的reset()方法来更新自定义FormControl的值,并触发更新视图的操作。