禁用 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();
}

表单控件名称:

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屋！