Question

假设我有以下formGroup结构：

userGroup = {
   name,
   surname,
   address: {
      firstLine,
      secondLine
   }
}

这迫使我编写类似于以下内容的HTML：

<form [formGroup]="userGroup">
   <input formControlName="name">
   <input formControlName="surname">

   <div formGroupName="address">
      <input formControlName="firstLine">
      <input formControlName="secondLine">
   </div>
</form>

让我们说，仅仅是为了示例，您被限制为编写如下所示的HTML：

<form [formGroup]="userGroup">
   <input formControlName="name">
   <input formControlName="surname">

   <div formGroupName="address">
      <input formControlName="firstLine">
   </div>

   <hr>
   <div formGroupName="someOtherGroup">
       <input id="problemSecondLine" formControlName="???.secondLine">
  </div>
</form>

有没有办法强迫id=problemSecondLine字段位于userGroup -> address -> secondLine之下，即使在视觉上，我别无选择，只能将其置于此特定DIV之下？

我想我可以通过ngModel手动更新 - 但我正在尝试找到最干净的方法。

Answer 1

您可以使用formControl指令代替formControlName

<input id="problemSecondLine" [formControl]="userGroup.get('address.secondLine')">

<强> Plunker Example

嵌套的角形表组 - 表单必须反映HTML结构

1 个答案: