Angular - 使用嵌套模板丢失数据

Question

为了在嵌套模板驱动形式中控制，我使用此

viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]

正如此article所述。

它对于简单的用法非常有用。但现在我面临着一个问题。我们来看一个例子（stackblitz）。假设我们有一个地址循环。有一个按钮可以添加新地址。

<button (click)="addAddress()">Add</button>
<ng-container *ngFor="let address of addresses; index as i">
  <fieldset ngModelGroup="address{{i}}">
    <address [address]="address"></address>
  </fieldset>
</ng-container>

如果添加新地址（在stackblitz中尝试），您将看到第一个组件的输入中删除了数据。但是模型中的数据还有什么奇怪的。

当我看到augury和控件时，我看到输入不是很好。应该在FormGroup下。

所以我确信这行有什么关系

viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]

喜欢用NgModelGroup替换NgForm或类似的东西。我一直在搜索角度文档，但找不到任何有用的信息。

Answer 1

带有<button (click)="addAddress()">Add</button> <ng-container *ngFor="let address of addresses; index as i"> <address [address]="address" [index]="index"></address> </ng-container> 指令的Fieldset需要在组件中。

<fieldset ngModelGroup="address{{index}}">
 <input ....
</fieldset>

在地址组件模板

中

type _ value =
| Bool : bool -> bool value
| Int : int -> int value

type _ expr =
| Value : 'a value -> 'a expr
| If : bool expr * 'a expr * 'a expr -> 'a expr
| Eq : 'a expr * 'a expr -> bool expr
| Lt : int expr * int expr -> bool expr

工作stackbitz