Question

我正在创建一个带有mat-select的反应形式。

<mat-form-field>
    <mat-select placeholder="Salutation*" formControlName="salutation">
      <mat-option *ngFor="let salutation of salutations" [value]="salutation.id">
        {{ salutation.label }}
      </mat-option>
    </mat-select>
</mat-form-field>

形式：

this.form = this.fb.group({
  person: this.fb.group({
    salutation: ['', Validators.required],
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', Validators.required]
  })     
});

我需要根据其他输入值禁用/启用此选择。由于反应形式不再支持[禁用]，因此我使用了以下

this.form.get('person').get('salutation').disable();

问题是我尝试使用

启用选择

this.form.get('person').get('salutation').enable();

它不起作用。有什么想法吗？

PS：使用disabled属性工作正常，但会抛出警告

您似乎正在使用带有响应式表单指令的disabled属性。如果将disabled设置为true 当您在组件类中设置此控件时，实际上将在DOM中设置disabled属性您。我们建议使用这种方法，以避免在检查后更改＆＃39;错误。

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

谢谢！

Answer 1

我最近遇到了同样的问题，我找到的解决方案是绑定“[Disabled]”属性，即使没有被 Angular CLI 推荐并向控制台抛出警告并且不会干扰功能使用控件的禁用状态，如下所示：

<mat-select [formControl]="yourControl" [disabled]="yourControl.disabled"></mat-select>

经过一些测试，它对我来说功能齐全。

Answer 2

我没有看到您从哪里获取地址。除了查看以下作品的地址。

要么您没有共享整个代码，要么就是：

this.form.get（＆＃39;人＆＃39）。得到（＆＃39;称呼＆＃39）。使（）;

您错过了一个括号，或者有一个额外的

-L

您在表单组中有一个人员组，因此您可能希望定义一个formGroupName div，或者您不会共享整个代码。

email: ['', [Validators.required]]

[disabled]仍然可以输出警告，但是你通过将它作为第二个参数添加到与该值相同的json对象中来实现组件中的禁用控制

<form [formGroup]="form">
  <div formGroupName="person">
    <mat-form-field>
      <mat-select placeholder="Salutation*" formControlName="salutation">
        <mat-option *ngFor="let salutation of salutations" [value]="salutation.id">
          {{ salutation.label }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

Answer 3

当我尝试重新初始化表单并将控件设置为启用时遇到了这个问题。（场景显示了一个详细记录，该记录只能由该记录的所有者进行编辑）。这适用于除选择控件以外的大多数控件。我设法通过使用适合您的代码的以下代码来解决它：

this.form.controls["salutation"].enable();

Answer 4

我遇到了同样的问题。尝试使用

disable({
   emitEvent: true,
   onlySelf: false
});

mat-select中的动态禁用/启用无法正常工作

4 个答案: