angular – 每个表行的反应形式

我正在使用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>

解决方法

使用formArray.你要做的是创建一个包含多个较小的formGroup的formGroup(主表单).每个较小的groups将是你的* 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.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,只为你:)