angular - 如何从 ControlValueAccessor 获取 FormControl 实例

Question

我有以下组件:

@Component({
    selector: 'pc-radio-button',
    templateUrl: './radio-button.component.html',
    providers: [
        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRadioButtonComponent), multi: true}
    ]
})
export class RadioButtonComponent implements ControlValueAccessor {
    ...
}

我可以通过这些输入分配和更改值:

<pc-radio-button [formControl]="formControl"></pc-radio-button>
<pc-radio-button [formControlName]="inputControlName"></pc-radio-button>

但是我需要组件能够直接访问分配的 formControl，因为我需要根据其状态添加样式。

通过创建一个@Input() formControl 并不能解决问题。因为它不包括通过 formControlName 分配表单控件的情况。

Answer 1

看起来 injector.get(NgControl) 正在抛出弃用警告，所以我想加入另一个解决方案:

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

诀窍是同时从提供者数组中删除 NG_VALUE_ACCESSOR ，否则你会得到循环依赖。

有关此的更多信息，请参阅 this talk by Kara Erickson of the Angular team .