各テーブル行の反応形式

Question

私は角度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> 

Answer 1

使用formArrayです。あなたが行うことはformGroupの複数の小さいものを含むformGroup（マスターフォーム）を作成することです。小さいfromGroupsはそれぞれ、あなたの*ngForで繰り返されるものになります。フォームを構築するのに役立つように、角度のformBuilderを使用することができ、あなたのコンポーネントで

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

：

フォームは次のようになります。あなたのコンストラクタで

：

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

今、あなたはあなたの繰り返しモデルのすべてのプロパティを初期化することができます。その後、各フィールドの各バリデーターをカスタマイズすることができます。 typescriptファイル内の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あるので

1. は、あなたがダウンして非常に細かいレベルにあなたの検証ロジックをカスタマイズすることができます。

2. 上記のように、各小文字の各valueChangeを各単一フィールドにサブスクライブすることができます。たとえば、あなたが最初のチームメンバーの最初の名前のフィールドの変更をサブスクライブしたい場合は、あなたがこれを行うことができます：

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

3. イベントであなたがマスターフォームを検証したい場合、あなたにもそうすることができます。

は、あなたがこのことについて