重置后角度表单保持禁用

Posted 2023-03-13

【中文标题】重置后角度表单保持禁用

【英文标题】：Angular Form Keep Disabled after Reset

【发布时间】：2021-07-29 05:49:33

【问题描述】：

我将下拉菜单设置为已禁用。但是，每次我重置表单 customerForm.reset() 时，下拉菜单都会启用，而不是禁用。

它在下面被硬编码为禁用 = true 。

如何在每次重置后将其保持为禁用状态？

<form [formGroup]="customerForm">
    <mat-form-field>
        <mat-label>Product List</mat-label>
        <mat-select
          formControlName="product"
          [disabled]="true">
             <mat-option>Select</mat-option>
             <mat-option
             *ngFor="let productItem of productList"
             [value]="productItem "
             >
              productItem 
             </mat-option>
        </mat-select>
    </mat-form-field>        

注意：希望在表单中保留值，尽可能不使用 getRawValue。

【问题讨论】：

尝试将formControlName=" product " 更改为formControlName="product"。看起来您正在使用 disabled 属性和响应式表单指令

嗨@StacksQueue 我刚刚改了，只是一个错字

总是禁用吗？用户什么时候可以选择productItem？

@StacksQueue 一开始是禁用的，然后我按下一个按钮来清除/重置表单，这就是启用下拉菜单的时候

【参考方案1】：

在您的clear/reset 函数中，您可以添加以下内容：

this.customerForm.controls['product'].disabled();

或者

你可以在你的formGroup中初始化

customerForm = this.fb.group(
   product: [value: '', disabled: true]
);

并在您的mat-select 中省略[disabled]="true"

【讨论】：

好吧，如果它在 Reactive 表单中被禁用，我必须这样做 getRawValue，我现在不喜欢这样做，想知道为什么重置会删除我的 html 禁用

在重置之前是否必须获取它的值？