是否可以有一个没有表单标签的 Angular 2 表单组？

Question

我正在寻找 Angular 2 documentation，但无法找到有关如何使用 formGroup.

的最佳实践

Is it mandatory to enclose a formGroup with a form tag ?

我查看了这个堆栈溢出问题：

我创建了这个组件模板：

<div [formGroup]="infoIdentityForm">
  <div class="info-identity_title" *ngIf="showTitle">
    <div class="group-title">Titre</div>
    <div class="group-radio">
      <span *ngFor="let choice of enumTitleValue">
        <label>{{choice}}</label>
        <input type="radio" formControlName="title" name="title" [id]="choice"/>
      </span>
    </div>
  </div>
  <div class="info-identity_firstname">
    <div class="group-title">Prénom</div>
    <div class="group-input">
      <input type="text" class="form-control" formControlName="firstName" maxlength="25">
    </div>
  </div>
  <div class="info-identity_lastname">
    <div class="group-title">Nom</div>
    <div class="group-input">
      <input type="text" class="form-control" formControlName="lastName" maxlength="25">
    </div>
  </div>
</div>

我试图避免使用嵌套表单标签

Answer 1

您要查找的是 formGroupName 指令

This directive can only be used with a parent FormGroupDirective (selector: [formGroup]).

It accepts the string name of the nested FormGroup you want to link, and will look for a FormGroup registered with that name in the parent FormGroup instance you passed into FormGroupDirective.

Nested form groups can come in handy when you want to validate a sub-group of a form separately from the rest or when you'd like to group the values of certain controls into their own nested object.

https://angular.io/docs/ts/latest/api/forms/index/FormGroupName-directive.html

<div formGroupName="infoIdentityForm">
</div>

根据文档，在某些时候需要在 <form [formGroup]="formProperty"> 中进行合法定义，并避免使用多个 <form> 标签。

如果您有子组件，您仍然需要 [formGroup]，但它可以不在 <form> 标记中。如果你想在一个大表格中使用它，那么你需要从父级输入你的 FormGroup 并将其设置为：

<td [formGroup]="parentGroup">
  <input type="text" formControlName="myControl"
</td>

@Input() parentGroup: FormGroup;