web-dev-qa-db-ja.com

Angular2 patchValue値を配列にプッシュします

Angular2の FormGroup.patchValue（） は新しい要素を配列にプッシュしません。

たとえば、次のようなものです：

ngOnInit() {

    this.form = this.formBuilder.group({
        animal: [''],
        school: this.formBuilder.group({
            name: [''],
        }),
        students: this.formBuilder.array([this.formBuilder.control('Bob')])
    });

    setTimeout(() => this.form.patchValue({
      animal: 'cat'
      school : {name: 'Fraser'},
      students: ['Bob gets edited', 'This will not show']
    }), 250);

}

"students"の最初の要素のみをupdateしますが、2番目の要素はinsertしません。

両方の要素を表示するには何をする必要がありますか？

ここのPlunker 。

angulartypescriptangular2-forms
16
Chi Chan

.patchValue()は既存のFormArrayのみを更新し、フォームモデルの構造を変更しません。

patchValue（value：any []、{onlySelf、emitEvent} ?: {onlySelf ?: boolean、emitEvent ?: boolean}）：void FormArrayの値にパッチを適用します。コントロールの構造に一致する配列を受け入れ、グループ内の正しいコントロールに値を一致させるために最善を尽くします。

エラーをスローすることなく、配列のスーパーセットとサブセットの両方を受け入れます。

実際には、配列に新しい要素を表示するためにPushする必要があります。

 this.form.controls['students'].Push(new FormControl('This will not show'));

これはすべてFormArrayドキュメントにあります https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html

10
silentsod

まあ、silentsodが言ったように、それは不可能です。現在、私は代わりとして以下を使用しています：

        let controlArray = <FormArray>this.form.controls['apps'];           
        this.list.forEach(app => {
                    const fb = this.buildGroup();
                    fb.patchValue(app);
                    controlArray.Push(fb);
            });

Angular Team-コレクション/オブジェクトグラフからパッチを当てるPatchArray（）のような新しい関数が必要です。これは基本的な使用例です。

16
Manish Jain

さて、私が見つけた解決策は次のとおりです。

this.myForm.controls['array'] = this.formBuilder.array(newArray.map(i => this.formBuilder.group(i)));
5
Giovane

これがあなたのお役に立てば幸いです。私のオブジェクトにはオブジェクトがあり、オブジェクトは内部にある複雑なオブジェクトを持っています。私の文法でごめんなさい。しかし、私のコードがあなたを助けることを願っています

ngOnInit() {
    this.descriptifForm = this._fb.group({
      name: 'ad',
      descriptifs: this._fb.array([ this.buildForm() ]),
    });

    this._service.getData().subscribe(res => {
      this.descriptifForm.setControl('descriptifs', this._fb.array(res || []));
    });

  }
buildA(): FormGroup {
    return this._fb.group({
      Id: '',
      Groups: this._fb.array([ this.buildB() ]),
      Title: ''
    });
  }

  buildB(): FormGroup {
    return this._fb.group({
      Id: '',
      Fields: this._fb.array([ this.bbuildC() ]),
      Type: ''
    });
  }

  buildC(): FormGroup {
    return this._fb.group({
      Answers: this._fb.array([ this.buildD() ]),
      Code: '',
    });
  }

  buildD(): FormGroup {
    return this._fb.group({
      Data: ''
    });
  }
0
bl2b