要解决Angular响应式表单中禁用控件后更改不起作用的问题,可以按照以下步骤进行操作:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
usernameControl: FormControl;
constructor() { }
ngOnInit() {
this.usernameControl = new FormControl({ value: '', disabled: true });
}
enableControl() {
this.usernameControl.enable();
}
disableControl() {
this.usernameControl.disable();
}
}
在上面的示例中,我们创建了一个文本输入框,并将FormControl对象'usernameControl'绑定到该输入框的[formControl]属性上。然后,我们在"启用"按钮的点击事件中调用enable()
方法来启用输入框,而在"禁用"按钮的点击事件中调用disable()
方法来禁用输入框。
这样,当我们点击"禁用"按钮时,输入框将被禁用,并且无法进行更改。而当我们点击"启用"按钮时,输入框将被启用,可以进行更改。
注意:要使用响应式表单,必须在组件类中导入FormControl,并在模块中导入ReactiveFormsModule。