如何从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

看来jector.get（NgControl）发出了弃用警告，所以我想提出另一种解决方案：

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

技巧还在于从providers数组中删除NG_VALUE_ACCESSOR，否则会得到循环依赖。

有关此问题的更多信息，请访问Angular团队的Kara Erickson。

Answer 2

一种可能的解决方案是获取NgControl实例Injector:

import { NgControl } from '@angular/forms';
export class PasswordComponent implements ControlValueAccessor {
  ...
  ngControl: NgControl;

  constructor(private inj: Injector) {
    ...
  }

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

然后你可以获得状态

ngControl.control.status

也可以看看

• 访问自定义表单控件的有效值