Reactive Forms Multiple Checkboxs
今早 (2017-06-20) 收到
要实现他的需求有两种方式,使用 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: '不喜欢',name: '非常喜欢',selected: false},name: '超级喜欢',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 的特点
Reactive Forms 的特点
Reactive Forms 中常用的指令有哪一些?
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。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |