如何在Angular2中使禁用的反应形式可编辑

Posted 2023-03-13

【中文标题】如何在Angular2中使禁用的反应形式可编辑

【英文标题】：How to make a disabled reactive form Editable in Angular2

【发布时间】：2018-06-04 21:06:07

【问题描述】：

我正在使用下面的代码创建一个表单并将其设为只读，我是 angular 新手

createForm() 
        this.comapnyIdentificationForm = this.fb.group(
          businessName: ['', Validators.required ],
          adressPrimary: '',
          adressSecondary: '',
          city:'',
          state: '',
          zipCode: '',
          country: '',
          companyPhone: '',
          DUNS: ''
        );
         this.comapnyIdentificationForm.disable();
      

我需要启用它并将编辑后的数据发布回 Json：

<button type="button"  (click)="EditData()" class="btn modal-btn btn-default">Edit</button>

【问题讨论】：

你真的需要发布更多的数据然后这个。例如，您如何使其只读

this.comapnyIdentificationForm.disable()，就在最后

【参考方案1】：

只需使用以下代码来启用您的表单。

this.comapnyIdentificationForm.enable();

获取一个 json 对象。使用以下代码：

this.comapnyIdentificationForm.value;

要使用后端数据填写表单，请使用以下代码： this.comapnyIdentificationForm.patchValue(jsonData);

【讨论】：

我从 JSON 中获取不同字段的数据，如果有人想要编辑，则需要将其发回更新

你想用 json 数据更新你的表单吗？能否请您正确描述，以便我可以更好地帮助您

在我的选项卡 1st 上，数据来自后端 json，然后我有一个编辑此数据的按钮，它可以编辑文件，然后如果进行了更改，则需要重新提交表单数据返回到后端 json (post)

我为您的用例更新了我的答案。如果您仍然需要帮助，请告诉我。

【参考方案2】：

你也可以使用指令

@Directive(
  selector: '[enableControl]'
)
export class EnableControlDirective 
  @Input() set enableControl( condition : boolean ) 
    if (condition)
        this.ngControl.control.enable();
    else
      this.ngControl.control.disable();
  

  constructor(private ngControl : NgControl ) 


//use
<input class="form-control " [enableControl]="condition">