要在Angular 7的响应式表单中禁用和启用特定的表单字段,你可以使用FormControl的disable()和enable()方法。下面是一个简单的示例代码:
在组件的.ts文件中:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
name: new FormControl(''),
email: new FormControl(''),
});
}
disableName() {
this.myForm.get('name').disable();
}
enableName() {
this.myForm.get('name').enable();
}
}
在上面的代码中,我们首先导入了FormBuilder,FormGroup和FormControl。然后,我们在构造函数中使用formBuilder来创建一个名为myForm的FormGroup,并使用FormControl创建了name和email的表单控件。
我们还在模板中放置了两个按钮,分别调用disableName()和enableName()函数。disableName()函数使用myForm.get('name')获取名为name的FormControl,并调用disable()方法来禁用该表单字段。enableName()函数则调用enable()方法来启用该表单字段。
这样,当我们点击"Disable Name Field"按钮时,名为name的输入字段将被禁用,而当点击"Enable Name Field"按钮时,该字段将被启用。