是否有可能没有表单标签的Angular 2 formGroup？

Question

我正在寻找Angular 2文档,并且没有办法找到关于如何使用formGroup的最佳实践.

是否必须formGroup用表格标签括起来？

我看过这个堆栈溢出问题:

formGroup需要一个FormGroup实例

我已经创建了这个组件模板:

<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指令

该指令只能与父FormGroupDirective(selector:[formGroup])一起使用.

它接受您要链接的嵌套FormGroup的字符串名称,并将在您传递给FormGroupDirective的父FormGroup实例中查找使用该名称注册的FormGroup.

当您想要独立于其余部分验证表单的子组或者您希望将某些控件的值分组到它们自己的嵌套对象中时,嵌套表单组可以派上用场.

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;