2016-11-15 3 views
1

Я ищу Angular 2 documentation, и нет никакой возможности найти, что является лучшей практикой использования formGroup.Возможно ли иметь форму Angular 2 formGroup без тега формы?

Обязательно ли приложить formGroup с тега формы?

Я смотрел на этот переполнение стека вопрос:

formGroup expects a FormGroup instance

Я создал этот компонент:

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

Я пытаюсь avoid the use of nested form tags

ответ

6

Что вы ищете является formGroupName директива

Эта директива может быть использована только с родительским FormGroupDirective (селектор: [formGroup]).

Он принимает имя строки вложенной FormGroup вы хотите связать, и будете искать для FormGroup зарегистрированного с этим именем в родительском FormGroup например, вы перешли в FormGroupDirective.

Вложенных формы групп могут пригодиться, когда вы хотите проверить на подгруппы формы отдельно от остальные или когда вы хотите группы значения некоторых элементов управления в их собственный вложенный объект.

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; 
+0

Прохладный трюк, отлично сработал для меня! – Abdel

Смежные вопросы