角4 FormGroup removeControl（）はフォームを更新しません

Question

私は反応的なフォームから要素を削除する方法を理解しようとしています。

はここで小さな例のplunkerだ：私はXボタンを押すとhttp://plnkr.co/edit/HyhMDoMtek02CyKpZ7Wt?p=preview

、フォームオブジェクトが更新されますが、フォームのUIはまだそこにアイテムを持っています。

フォームを削除時に更新するにはどうすればよいですか？

あなたはあなたがフォームから

deleteItem(id: number){ 
    var elem = this.widget.items.find((i)=>i.id == id); 
    this.widget.items.splice(this.widget.items.indexOf(elem), 1) 
    (<FormGroup>this.form).removeControl(id.toString()); 
    } 

その他のオプションはコントロールオブジェクトを介してオブジェクトの反復処理を経由しての代わりに反復処理であろうウィジェットから削除何をする必要があるかのウィジェット

<div *ngFor='let item of widget.items'> 
      <input type='text' [formControlName]='item.id'> 
      <button type='button' (click)='deleteItem(item.id)'>X</button> 
      </div> 

を反復処理しているテンプレートで

Answer 1

<div *ngFor='let control of form.controls'> 
    <input type='text' [formControl]='control'> 
    <button type='button' (click)='deleteItem(item.id)'>X</button> 
</div> 

Answer 2

私の会社では、FormGroupsの使用中にこの問題が発生しました角度ベースのウェブサイト上でコントロールを動的に追加および削除します。

私たちのソフトウェアには、FormControlを動的に追加/削除するFormGroupがあります。 widget.itemsエントリを追加/削除すると、コントロールが表示されたページに追加/削除されます。

ウィジェットを追加する場合は、まずウィジェットを追加してから、FormGroup.addControlを使用して新しいフォームコントロールをFormGroupに追加します。新しいコントロールがコントロールリストの下部に追加され、コントロールに関連付けられているバリデーターも追加されます。既存のコントロールはすべてデータとバリデーターを維持します。

一方、ページ上の対応するコントロールを削除する代わりに、下部以外のwidget.itemsリストのどこからでもコントロールを削除すると、下部のコントロールが削除されます。これにより、現在削除されたウィジェットアイテムの下にあるすべてのコントロールに不正なデータが含まれるようになります。削除されたアイテムのアイテムには古い情報が含まれます。この問題を解決し、角度できるように

が、それは正しく全体のフォーム・グループを更新する必要が知っている、次の操作を行うことができます（[WIDGET1、WIDGET2、widget3、widget4] = widget.itemsを想定）：

2. が検出

widget.items = []

[]にwidget.items設定変更

this.changeDetectorRef.detectChanges（）

（削除する項目無しリスト別名）修飾リストに

リセットwidget.items

widget.items

= [widget1、widget3、widget 4]

これにより、有効なデータと有効なバリデータでページリストが更新されます。

これは、カスタムコントロールを処理し、FormGroup/FormControlの作成とライフサイクルを結ぶために必要なソフトウェアです。うまくいけば、これは似たような状況にある人を助けてくれるはずですが、このソリューションを試す前に、受け入れられた答えから戦略を試してみましょう。