如何在 formBuilder 上禁用 mat-autocomplete？

Question

I am trying to create a form in which once an option is selected in the first field, this selection gives the options of the second field, which is a mat-autocomplete , also when value from the mat-autocomplete is selected , it is filled mat-chips 。

问题是在填充第一个字段之前，我无法禁用第二个字段。

我尝试了两种不同的方式，如控制台警告所示：

"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:
  // Specify the `disabled` property at control creation time:
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

  // Controls can also be enabled/disabled after creation:
  form.get('first')?.enable();
  form.get('last')?.disable();"

我也试过这个问题的回答：

Angular mat-autocomplete 禁用输入 FormControl 不工作

但最后我不得不这样做（给我警告）：

HTML

<div class="modal-descriptors" [formGroup]="filterValueForm">
    <mat-form-field appearance="outline" class="form-field">
      <mat-label>tag</mat-label>
      <mat-select (selectionChange)="onFilterChange($event)" formControlName="filterSelectCtrl" required>
        <mat-option *ngFor="let filter of filters" [value]="filter.code">{{ filter.code }}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline" class="modal-descriptors">
      <mat-label>condition</mat-label>
      <mat-select formControlName="filterConditionCtrl" required>
        <mat-option value="true">{{ apply$ | async }}</mat-option>
        <mat-option value="false">{{ notApply$ | async }}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline" class="descriptors">
      <mat-label>{{ values }}</mat-label>
      <mat-chip-list #toChipList required>
        <mat-chip
          class="descriptors_label"
          *ngFor="let filterValue of selectedFiltersValue"
          [selectable]="selectable"
          [removable]="removable"
          (removed)="removeSelectedFilterValue(filterValue)">
          {{ filterValue.value }}
          <mat-icon class="iconicon" matChipRemove *ngIf="removable">close</mat-icon>
        </mat-chip>
        <input type="text"
          matInput
          #filterValueInput
          formControlName="filterValueCtrl"
          [matAutocomplete]="autoTo"
          [matChipInputFor]="toChipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)"
          [disabled] = "isFilterValueSelected"
          >
      </mat-chip-list>
      <mat-autocomplete  #autoTo="matAutocomplete" (optionSelected)="selected($event)">
        <mat-option *ngFor="let filterValue of filteredValues" [value]="filterValue">{{ filterValue.value }}</mat-option>
      </mat-autocomplete>
    </mat-form-field>

TS

ngOnInit() {
    this.filterValueForm = this.fb.group({
      filterSelectCtrl: [null, Validators.required],
      filterConditionCtrl: [null, Validators.required],
      filterValueCtrl: [{value: '', disabled: true}, Validators.required], /*this object inside array do nothing*/ 
    })
};

get isFilterValueSelected() {
    return !this.filterValueForm.get('filterSelectCtrl').value ? true : false;
  }

有谁知道哪里出了问题或知道更好的方法吗？

Answer 1

禁用 formGroup 声明中的第二个字段。

    this.filterValueForm = this.fb.group({
      firstField: ['', Validators.required],
      secondField: [{value: '', disabled: true}, Validators.required], 
    })

然后，当您 select 从自动完成中选择一个选项时，您将调用selected($event) function 从您的 ts。 在这个 function 中，您可以像这样启用第二个字段：

selected() {
    \*Do whatever logic you want to do when an autocomplete element is selected*\
    this.filterValueForm.controls['secondField'].enable();
  }

编辑：

您正在使用以下行覆盖 html 上的 ts 配置

<input type="text"
          matInput
          #filterValueInput
          formControlName="filterValueCtrl"
          [matAutocomplete]="autoTo"
          [matChipInputFor]="toChipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)"
          [disabled] = "isFilterValueSelected" <---
          >

Answer 2

我找到了解决办法。

不知道为什么，但是在创建这样的formGroup时不起作用：

filterValueCtrl: [{value: '', disabled: true}, Validators.required]

在尝试了一些其他解决方案后，我发现了一个：

this.filterValueForm.controls.filterValueCtrl.disable();

但是不知道为什么在创建其内部ngOnInit()的formGroup之后使用它为什么不起作用

所以我制作了当鼠标悬停在<mat-form-field>时触发的方法

TS:

enableOrDisableField(){
    this.filterValueForm.get('filterSelectCtrl').value ? this.filterValueForm.controls.filterValueCtrl.enable() : this.filterValueForm.controls.filterValueCtrl.disable();
  }

HTML：

<mat-form-field appearance="outline" (mouseenter)="enableOrDisableField()">
...
...
<mat-form-field>

也许它不是最好的解决方案，但它可以工作并且在控制台没有警告......所以我认为它对我来说很好。

希望可以帮助某人，并向所有试图提供帮助的人致敬。