如何在 Angular 的 ControlValueAccessor 的自定义实现中访问“updateOn”选项？

Question

我必须遵循表格

form = new FormGroup({
   title: new FormControl(null, {updateOn: 'blur'}),
})

对于标题输入，我创建了一个实现ControlValueAccessor的自定义控件title-input 。 如何访问此控件中的updateOn选项？

Answer 1

经过一番谷歌搜索，我找到了两个解决方案：

解决方案#1：

请注意，没有NG_VALUE_ACCESSOR提供程序。

@Component({
    selector: 'app-my-input',
    templateUrl: './my-input.component.html',
    styles: [],
})  
export class MyInputComponent implements OnInit, ControlValueAccessor, AfterViewInit {
    onChange: (_: any) => void;
    onTouched: () => void;
    isDisabled: boolean;
    value: string;

    constructor(private ngControl: NgControl) {
        ngControl.valueAccessor = this;
    }

    ngOnInit() {
        console.log('Update On: ', this.ngControl.control.updateOn);
    }
}

解决方案#2。

@Component({
    selector: 'app-my-input',
    templateUrl: './my-input.component.html',
    styles: [],
    providers: [
    {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => MyInputComponent),
        multi: true,
    },
    ],
})
export class MyInputComponent implements OnInit, ControlValueAccessor, AfterViewInit {
    onChange: (_: any) => void;
    onTouched: () => void;
    isDisabled: boolean;
    value: string;

    ngControl: NgControl;

    constructor(private inj: Injector) {
    }

    ngOnInit() {
        this.ngControl = this.inj.get(NgControl);
    }

    ngAfterViewInit(): void {
        console.log('Update on:', this.ngControl.control.updateOn);
    }
}