web-dev-qa-db-ja.com

Angular-formGroupNameの値を変更してもフォームは更新されません

タイトルで説明されているように、formGroupNameの値を変更してもフォームは更新されません。 （ボタンを押した後、入力に表示される値は同じままです）

これが plunker です。

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="myForm">
    <div [formGroupName]="fgn">
        <input [formControlName]="'name'">
    </div>
</form>

<button (click)="formChange()" >Change</button>

{{fgn}}
<br>
{{myForm.value | json}}
  `,
})
export class App {

    private myForm: FormGroup;
    private fgn: String;

    ngOnInit() {
        this.fgn = 'zero';

        this.myForm = this.formBuilder.group({
            zero: this.formBuilder.group({
                name: 'Zero'
            }),
            one: this.formBuilder.group({
                name: 'One'
            })
        });
    }

    formChange() {
        this.fgn = 'one';
    }

    constructor(private formBuilder: FormBuilder) {

    }
}
angularangular-reactive-forms
5
Thodoris

使用する代わりに、

<input [formControl]="myForm.controls[fgn].controls['name']">

使用する、

<form [formGroup]="myForm">
 <div [formGroup]="myForm.controls[fgn]">
  <input [formControlName]="'name'">
 </div>
</form>

その理由は、フォームに25を超えるフィールドなど、n個の入力フィールドがある場合、各フィールドに[formControl]="myForm.controls[fgn].controls['name']"種類の宣言を適用することはお勧めしません。これには時間がかかり、単純な変更を変更する場合、悪夢のように見えます。

代わりに、[formGroup]="myForm.controls[fgn]"を使用すると、内部の[formControlName]が単独で処理されます。そして、これは私のプロジェクトで使用しているのでうまく機能します。

このアイデアを私に取り入れてくれた@Amitに感謝します。

お役に立てれば。幸せな最適化されたコーディング:)

1
Venkatesh Rajavetrivel

formControlNameアプローチでうまくいかなかった理由がわかりません。

これはうまくいくようです：

<input [formControl]="myForm.controls[fgn].controls['name']">

[〜＃〜]更新[〜＃〜]：

AOTにこの回避策を使用できます。

<input [formControl]="myForm.get(fgn + '.name')" />

（これはgetメソッドを頻繁に呼び出すため、回避策と見なされます）

2
Amit

あなたは間違っていました。正しいコードは次のとおりです。

<form [formGroup]="myForm">
    <div>
        <input [formControl]="myForm.controls['zero'].controls['name']">
        {{myForm.controls['zero'].controls['name'].value}}
    </div>
</form>

<button (click)="formChange()" >Change</button>

{{fgn}}
<br>
{{myForm.value | json}}

説明

formControlNameにはフォームコントロールの名前が必要ですが、間違った方法で使用しています=> [formControlName]。フォームコントロールの名前ではなくフォームコントロールオブジェクトを渡す場合は、[formControl]を使用します。これが役に立てば幸い

2
Sandip Jaiswal