Angular 在表单生成器中设置禁用属性

Question

我的应用程序中有一个响应式表单，我是这样创建它的：

this.myForm = new FormGroup({
    name: new FormControl(this.item.name, Validators.required),
    active: new FormControl(this.item.active),
    value: new FormControl({ value: this.item.value, disabled: !this.item.active }, this.item.active ? Validators.required : null)
});

但是现在，我需要向我的表单添加一些自定义验证器。所以，我改变了我的代码来形成这样的构建器：

this.myForm = this.fb.group({
    name: [this.item.name],
    active: [this.item.active],
    value: [this.item.value, this.item.active ? Validators.required : null]
}, {validators: customValidator()});

我找不到如何将 disabled 属性设置为如下所示。

Answer 1

为什么您尝试使用禁用值来禁用。请改用 disable 形式的方法。

this.myForm = new FormGroup({
    name: new FormControl(this.item.name, Validators.required),
    active: new FormControl(this.item.active),
    value: new FormControl({ value: this.item.value}, 
   this.item.active ? Validators.required : null)
},{validators: customValidator()} );

然后

this.myForm.get('value').disable({emitEvent: false});

emitEvent: false here 将阻止触发此处的值更改。

Angular 在表单生成器中设置禁用属性

Angular set disabled attribute in form builder

angular

angular-reactive-forms