每个表格行的反应形式 [英] Reactive form for each table row

问题描述

我正在使用Angular 2，我想分别验证每一行中的控件.但是我没有任何办法做到这一点.我希望仅使用反应性表单而不使用模板驱动的方法来完成此操作.我需要每个<tr>上的[formGroup].任何帮助将不胜感激.下面是我的代码的结构:

I'm using Angular 2 and I want to validate controls in each row separately. But I'm not getting any way to do that. I want it to be done using reactive forms only and not using template-driven approach. I want [formGroup] on each <tr>. Any help will be appreciated. Below is the structure of my code:

<tbody *ngFor="let single of allTeamDetails"                
       [ngClass]="{'alternate-row-color': $even}">
  <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 type="button"                                      
              class="btn save-user-details save-sub-account-details"  
              data-toggle="tooltip" title="Send Message"                       
              (click)="openSendMessageModal(single.email)">
        <i class="fa fa-envelope" aria-hidden="true"></i> 
      </button>
    </td>
  <tr>
</tbody>

推荐答案

使用formArray.您将要做的是创建一个包含多个较小的formGroup的formGroup(主表单).每个较小的fromGroups将是您在*ngFor中重复的内容.

Use formArray. What you will do is you create a formGroup (master form) that contains multiple, smaller formGroup. Each smaller fromGroups will be what is repeated in your *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来帮助构建表单.

In your component, you can use angular's formBuilder to help to build a the form.

在您的构造函数中:

  constructor(private formBuilder: FormBuilder) {
    this.teamForm = this.formBuilder.group({
      memberDetails: this.formBuilder.array([])
    });
  }

现在，您可以初始化重复模型的每个属性.然后，您可以自定义每个字段的每个验证器.请注意您的打字稿文件中与html中的属性相对应的属性.我在ngOnInit中进行了所有这些操作，以便可以在呈现属性之前将其绑定到html.

Now you can initialize every property of your repeated models. You can then customise each validators of each field. Note the properties in your typescript file that corresponds to the ones in html. I do all these in ngOnInit so that the properties can binded to the html before they are rendered.

  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)]]
        }))
      )
    })
  }

毕竟，添加验证消息非常简单.这样做的好处?

After all these, adding validation messages are very trivial. The benefits of doing it this way?

1. 因为每个实例本身现在都是单个formGroup，所以您可以将验证逻辑自定义到非常精细的级别.

1. because each instance is now a single formGroup by itself, you can customize your validation logic down to a very granular level.

如上所述，您可以订阅每个较小形式的每个valueChange，直至每个单个字段.例如，如果您要订阅一线队成员的名字的字段更改，则可以执行以下操作:

As the point above, you can subscribe to each valueChange of each smaller forms, down to each single field. For example, if you want to subscribe to first team member's first name's field change, you can do this:

  this.teamForm
   .controls.memberDetails
   .controls[0] //get the first instance!
   .controls.firstName  //get the firstName formControlName
   .valueChange 
   .subscribe(x=>console.log('value changed!))

如果您要验证主表单，也可以这样做.

In the event if you want to validate the master form, you can do so as well.

已经创建了一个 plnkr ，仅供您使用:)

Have created a plnkr, just for you :)

这篇关于每个表格行的反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！