要根据选择值禁用formArray中的特定formControl,可以使用Angular的表单控件的disable()方法。下面是一个示例解决方法:
首先,在组件的HTML模板中,使用ngFor循环遍历formArray,并为每个formControl添加一个选择器。例如:
接下来,在组件的typescript文件中,定义一个方法来处理复选框的变化事件。该方法将根据选择值禁用或启用特定的formControl。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myFormArray: this.formBuilder.array([
this.formBuilder.control(false),
this.formBuilder.control(false),
this.formBuilder.control(false)
])
});
}
onCheckboxChange(value: boolean, index: number) {
const formArray: FormArray = this.myForm.get('myFormArray') as FormArray;
const control: FormControl = formArray.controls[index] as FormControl;
if (value) {
control.enable();
} else {
control.disable();
}
}
}
在上述代码中,我们首先创建了一个formBuilder实例,并使用它创建了一个包含3个formControl的formArray。然后,在onCheckboxChange方法中,我们通过索引获取特定的formControl,并根据选择值禁用或启用它。
通过这种方法,当复选框的选择状态发生变化时,相应的formControl将被禁用或启用。
上一篇:Angular V5 Webpack教程中的“生产构建问题(img标签错误)”
下一篇:Angular v8 - @ViewChild static true or false Angular v8 - @ViewChild静态属性 true 或 false