禁用FormControl不能与逻辑一起使用 [英] FormControl disabled is not working with logic

问题描述

我想从ts文件中禁用一个字段. 当我true/false静态时，它工作正常.但我想在逻辑上做到这一点.当我的表单处于编辑模式时，我将使字段可编辑.当表单处于查看模式时将禁用这些字段.

I want to make a field disabled from ts file. it is working fine when I true/false statically. but I want to make it logically. when my form in edit mode I will make the fields editable. when the form in view mode will disable the fields.

您似乎正在使用带有反应形式的Disabled属性 指示.如果将禁用设置为true 当您在组件类中设置此控件时，disabled属性实际上将在DOM中设置为 你.我们建议使用这种方法来避免检查后更改"错误.

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

更改模式时的逻辑

editProspectDetails() {
    this.editProspectMode = !this.editProspectMode;
    this.isProspectDisabled();
}

FormControl名称:

this.fb.group({
prospect_pref_name: new FormControl({value: '', disabled: this.isProspectDisabled()}),
})

isProspectDisabled(){
    return true; // working

    but i want to make it conditionally
    console.log(this.editProspectMode); // it will return : true/ false
    return this.editProspectMode;
}

推荐答案

您可以简单地使用disable()禁用字段

You can simply use disable() to disable field

尝试

this.fb.group({
prospect_pref_name: new FormControl(''),
}

和您的editProspectDetails()

editProspectDetails() {
    this.editProspectMode = !this.editProspectMode;
    this.your_form_name.controls.prospect_pref_name.disable();
}

这篇关于禁用FormControl不能与逻辑一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！