Reactive Forms Multiple Checkboxs

7

今早 (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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

mitnick520 · 2018年01月23日

楼主你好,我该如何获取checkbox 选中的 id 呢?在
onSubmit() {

// 根据实际要求进行数据处理
console.dir(this.myForm.value.likes);

}

回复

载入中...