我正在使用Angular 2,我想分别验证每行中的控件。但我没有办法做到这一点。我希望它只使用反应形式而不是使用模板驱动的方法。我想在每个<tr>
上使用[formGroup]。任何帮助将不胜感激。以下是我的代码结构:
<tbody [ngClass]="{'alternate-row-color': $even}" *ngFor="let single of allTeamDetails">
<tr>
<td class="td-data first-column">
<input type="text" class="input-text form-control" [value]="single.first_name">
</td>
<td class="td-data second-column">
<input type="text" class="input-text form-control" [value]="single.last_name">
</td>
<td class="td-data third-column">
<input type="email" class="input-text form-control" [value]="single.email">
</td>
<td class="td-data fourth-column">
<select class="selection-dropdown width-80-percent" [value]="single.user_role">
<option *ngFor="let singleRole of allUserRole" value="{{singleRole.name}}">{{setUserRoleAndType(singleRole.name)}}</option>
</select>
</td>
<td class="td-data fifth-column" >
<input type="password" class="input-text form-control" >
</td>
<td class="td-data sixth-column" >
<input type="password" class="input-text form-control" >
</td>
<td class="td-data save-send-tm-data">
<button class="btn save-user-details save-sub-account-details" type="button" data-toggle="tooltip" title="Save"><i class="fa fa-floppy-o" aria-hidden="true"></i></button>
</td>
<td class="td-data save-send-tm-data">
<button class="btn save-user-details save-sub-account-details" (click)="openSendMessageModal(single.email)" type="button" data-toggle="tooltip" title="Send Message"><i class="fa fa-envelope" aria-hidden="true"></i></button>
</td>
<tr>
</tbody>
答案 0 :(得分:17)
使用formArray
。您要做的是创建一个formGroup
(主表单),其中包含多个较小的formGroup
。每个较小的群组都将是您*ngFor
中重复的内容。
您的表单应如下所示:
<!--This is your master form-->
<form [formGroup]="teamForm">
<!--Use formArray to create multiple, smaller forms'-->
<div formArrayName="memberDetails">
<div *ngFor="let single of allTeamDetails; let $index=index">
<div [formGroupName]="$index">
<div>
<!--your field properties of every repeated items-->
<input placeholder="First Name" type="text" formControlName="firstName" />
</div>
<div>
<input placeholder="Last Name" type="text" formControlName="lastName" />
</div>
</div>
</div>
</div>
</form>
在您的组件中,您可以使用angular formBuilder
来帮助构建表单。
在你的构造函数中:
constructor(private formBuilder: FormBuilder) {
this.teamForm = this.formBuilder.group({
memberDetails: this.formBuilder.array([])
});
}
现在您可以初始化重复模型的每个属性。然后,您可以自定义每个字段的每个验证器。请注意打字稿文件中与html中的属性相对应的属性。我在ngOnInit
中完成所有这些操作,以便属性在呈现之前可以绑定到html。
ngOnInit() {
this.teamForm = this.formBuilder.group({
memberDetails: this.formBuilder.array(
this.allTeamDetails.map(x => this.formBuilder.group({
firstName: [x.first_name, [Validators.required, Validators.minLength(2)]],
lastName: [x.last_name, [Validators.required, Validators.minLength(2)]]
}))
)
})
}
毕竟,添加验证消息非常简单。这样做的好处是什么?
因为每个实例现在只有一个formGroup
,所以您可以将验证逻辑自定义为非常精细的级别。
如上所述,您可以订阅每个较小表单的每个valueChange
,直到每个单个字段。例如,如果您想订阅第一个团队成员的名字的字段更改,您可以这样做:
this.teamForm
.controls.memberDetails
.controls[0] //get the first instance!
.controls.firstName //get the firstName formControlName
.valueChange
.subscribe(x=>console.log('value changed!))
如果您要验证主表单,也可以这样做。
为您创建了plnkr:)