在Angular 9中,可以使用disable()
和enable()
方法来动态禁用和启用表单控件。以下是一个包含代码示例的解决方法:
首先,确保在组件的模板中使用了响应式表单。在组件中定义一个FormGroup
对象,并在模板中使用formGroup
指令来绑定。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
myControl: [{ value: '', disabled: false }]
});
}
toggleControl() {
const control = this.myForm.get('myControl');
if (control.disabled) {
control.enable();
} else {
control.disable();
}
}
}
在上述示例中,我们创建了一个名为myForm
的FormGroup
对象,并在构造函数中使用formBuilder
创建了一个名为myControl
的表单控件。初始情况下,该控件是启用的。
在toggleControl()
方法中,我们获取myControl
的引用,并检查它是否被禁用。如果是禁用状态,则调用enable()
方法来启用它;如果是启用状态,则调用disable()
方法来禁用它。
这样,当用户点击Toggle按钮时,表单控件的状态就会动态切换。
请注意,为了使用这种方法,你需要在组件中导入FormBuilder
和FormGroup
类,并通过依赖注入的方式在构造函数中实例化formBuilder
对象。