web-dev-qa-db-ja.com

ControlValueAccessorからFormControlインスタンスを取得する方法

私は次のコンポーネントを持っています：

@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を介して割り当てられる場合は対象外です。

angularcontrolsdirectiveaccessor
16
Gediminas Bublys

Injector.get（NgControl）が非推奨の警告をスローしているように見えるので、別の解決策を試してみました：

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

トリックは、プロバイダー配列からNG_VALUE_ACCESSORも削除することです。そうしないと、循環依存関係が発生します。

これに関する詳細は Angular team のKara Ericksonによるこの講演）にあります。

19
Jesse

可能な解決策の1つは、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

こちらもご覧ください

13
yurzui

この私の答えから行く stackblitz質問

別のソリューションは、プロバイダーNG_VALIDATORSとして追加することです。したがって、関数検証では、コントロールを変数に格納できます

public validate(c: FormControl) {
  if (!this.control)
    this.control=c;
  return null;

stackblitz を参照

0
Eliseo