web-dev-qa-db-ja.com

Angular 8：コンポーネント内のformControlNameの下に複数のネストされたレベル

このリソースを使用して、formControlNameを複数のネストされたレベルに実装します。

Angular 2-コンポーネント内のformControlName

実際のformGroupが子のformControlNameコンポーネントの3つのコンポーネントレベル上にあるとします。

ControlValueAccessorは、Parentコンポーネントが子のすぐ隣にある場合に機能します。ただし、（祖父）フォームの上の複数のレベルは機能しません。

サービスの代替、または複数の入力/出力はありますか？それともこれらは唯一の方法ですか？

A--> Component with formGroup 
   B---> Component container
      C---> Component container
        D ---> Component with FormControlName (should pass to Component A)

コンポーネントAは、これと同様に、異なる子コンポーネントから複数のフォームコントロール名を収集します。

InputText.ts

export class InputTextComponent implements  AfterViewInit, ControlValueAccessor  {
  @Input() disabled: boolean;
  @Output() saveValue = new EventEmitter();

  value: string;
  onChange: () => void;
  onTouched: () => void;

  writeValue(value: any) {
    this.value = value ? value : "";
  }

  registerOnChange(fn: any) {this.onChange = fn}

  registerOnTouched(fn: any) {this.onTouched = fn}

  setDisabledState(isDisabled) {this.disabled = isDisabled}
}

InputText.html

 <input .. />
javascripthtmlcssangularangular8
5
user12250118

Stackblitz

これはあなたが探しているものだと思います

stackblitzの例に従ってください

3つのコンポーネントを作成しましたcomp1comp2comp3

appModuleで登録フォームを作成し、formGroupをcomp1 => comp2 => comp3に渡しました

comp3でformControlプロパティのageを作成してバインドしました。 ageの値をcomp3から変更すると、親コンポーネント、つまりappComponentに反映されます。

お役に立てれば！

乾杯！

0
Shankarlal