在Angular 6中,你可以使用FormArray
来处理多选表单的change事件。下面是一个示例代码,演示了如何解决angular6-json-schema-form
多选表单change事件的问题:
首先,我们需要创建一个FormArray
,用于存储多选表单的选中项。在组件的OnInit
生命周期钩子中,创建一个空的FormArray
并将其添加到表单中:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
options: this.fb.array([])
});
}
}
接下来,在模板中使用ngFor
指令循环遍历选项,并为每个选项添加一个复选框。同时,为每个复选框绑定change
事件,并在事件处理程序中更新FormArray
:
最后,我们需要实现onOptionChange
方法来更新FormArray
。在这个方法中,我们首先获取选项的值和是否被选中,并将其更新到FormArray
中:
onOptionChange(event, index) {
const options = this.form.get('options') as FormArray;
if (event.target.checked) {
options.push(this.fb.control(event.target.value));
} else {
options.removeAt(index);
}
}
通过这种方式,我们可以实时地在FormArray
中更新选中的项,并在change事件中获取所选项的值。