Reactive Forms Multiple Checkboxs

今早 (2017-06-20) 收到 深夜徘徊 的邀請，讓我幫忙解答 - angular2如何雙向綁定多個checkbox？ 這個問題。具體問題以下：

好比我又一個數組以下：

var array = ['喜歡','不喜歡','很是喜歡','超級喜歡','喜歡得不得了'];

html模板中

<div class="like" *ngFor="let e of array">
    <input type="checkbox" name="like" value="{{e}}">
</div>
<div class="youselect"></div>

我蓋如何實現，選中其中一個checkbox後，能在div.youselect中顯示出我已經選中的內容，若是是多選，則呈現出數組或者以逗號隔開的形式

好比我選中了「喜歡」，「喜歡得不得了」，那麼div.youselect中則顯示出：「喜歡，喜歡得不得了」

可使用formArray等方式進行，可是我在使用過程當中都沒有實現。但願大神出手幫幫忙！

要實現他的需求有兩種方式，使用 Template-driven 表單或 Reactive 表單。對於 Reactive 表單中毒太深的我，首先想到的固然是使用 Reactive 的方式哈。若對 Template-driven 方式感興趣的同窗，能夠參考 _CRY 的回答哈。廢話很少說了，直接來看一下具體實現哈。

具體示例

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, FormArray} from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
   <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div class="like" *ngFor="let like of likes.controls; let i = index;">
      <input type="checkbox" [formControl]="like"> 
      {{likesArr[i].name}}
    </div>
    <div class="youselect">{{selects}}</div>
    <button type="submit">提交</button>
   </form>
  `,
})
export class AppComponent implements OnInit{

  myForm: FormGroup;

  likesArr=  [
    {id: 0, name: '喜歡', selected: true},
    {id: 0, name: '不喜歡', selected: true},
    {id: 0, name: '很是喜歡', selected: false},
    {id: 0, name: '超級喜歡', selected: false},
    {id: 0, name: '喜歡得不得了', selected: false}
  ];

  selects: string[] = [];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      likes: this.buildLikes()
    });

    this.buildSelected();

    this.likes.valueChanges.subscribe(values => {
      let selects: string[] = [];
      values.forEach((selected: boolean ,i: number) => {
        selected === true && selects.push(this.likesArr[i].name)
      });
      this.selects = selects;
    });
  }

  buildLikes(): FormArray {
    return this.fb.array(
      this.likesArr.map(like => {
        return this.fb.control(like.selected);
      })
    );
  }

  buildSelected() {
    this.likesArr.forEach((like) => {
      if(like.selected) this.selects.push(like.name);
    });
  }

  get likes () {
    return this.myForm.get('likes');
  }

  onSubmit() {
    // 根據實際要求進行數據處理
    console.dir(this.myForm.value.likes);
  }
}

我有話說

Template-driven 與 Reactive Forms 各有什麼特色？

Template-driven Forms 的特色

• 使用方便

• 適用於簡單的場景

• 經過 [(ngModel)] 實現數據雙向綁定

• 最小化組件類的代碼

• 不易於單元測試

• 異步建立表單控件

Reactive Forms 的特色

• 比較靈活

• 適用於複雜的場景

• 簡化了HTML模板的代碼，把驗證邏輯抽離到組件類中

• 方便的跟蹤表單控件值的變化

• 易於動態添加表單控件

• 易於單元測試

Reactive Forms 中經常使用的指令有哪一些？

• formGroup

• formControl

• formControlName

• formGroupName

• formArrayName

Reactive Forms 中如何填充或更新表單的值？

在 Angular 4 中有多種方式能夠更新表單的值，對於使用響應式表單的場景，咱們能夠經過框架內部提供的 API ，如 patchValue 和 setValue 方便地更新表單的值。setValue() 方法須要設置全部表單的值，而patchValue() 只需設置部分值。

patchValue() 示例

this.signupForm.patch({
  email: '24065****@qq.com'
});

setValue() 示例

this.signupForm.setValue({
  userName: 'semlinker',
  email: '24065****@qq.com'
});

若想進一步瞭解詳細信息，請參考 - Angular 4.x Forms patchValue and setValue。