angular2-forms - Angular 2 自定义表单组件 : Provide a markTouched method

Question

我有一个实现 ControlValueAccessor 的自定义表单组件。该组件有一个内部属性 touched。

export class BmInputComponent implements ControlValueAccessor, Validator {

    private onTouchedCallback: () => {};
    private touched: boolean = false;

    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

    onBlur() {
        this.touched = true;
        this.onTouchedCallback();
    }
}

我需要实现一个类似

的方法

markTouched() {
    this.touched = true;
}

在 formControl 中执行 markAsTouched 时，组件的用户可以调用它:customInputControl.markAsTouched()

我找不到一个有角度的方式来做到这一点。

@编辑:试图注入(inject) NgControl:

@Component({
    selector: 'bm-input',
    templateUrl: './bm-input.component.html',
    encapsulation: ViewEncapsulation.None,
    providers: [
         {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => BmInputComponent),
            multi: true
        }
    ]
})
export class BmInputComponent implements ControlValueAccessor, Validator {

    private onTouchedCallback: () => {};
    private touched: boolean = false;

    constructor(@Self() @Optional() public _formControl: NgControl) {
        this._viewDate = new Date();
        if (this._formControl) {
            this._formControl.valueAccessor = this;
            this._formControl.statusChanges.subscribe(this.markTouched);
        }
    }
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

    onBlur() {
        this.touched = true;
        this.onTouchedCallback();
    }

    markTouched() {
        if(this._formControl.touched)
            this.touched = true;
    }

}

但我得到 无法实例化循环依赖! NgControl 当使用 formControl 调用组件时。

Answer 1

你试过用@SkipSelf()代替@Self()吗？