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

Question

我正在开发一个自定义组件库，我们有一个带有芯片的自定义自动完成组件。当配置对象中的禁用属性为真时，我希望能够禁用输入控件。我试图在 ngOnInit 中这样做，但没有成功。 HTML

 <div [formGroup]="group" *ngIf="config && !config.hideInput">
    <label *ngIf="config.overLabel" style="font-weight: 500;">{{ config.overLabel }}</label>
      <mat-form-field class="form-input" [appearance]="config.appearance ? config.appearance : 'standard'">
        <mat-chip-list #chipList>
          <mat-icon *ngIf="config.showIconOnAutocomplete" class="material-icons-outlined positionAbsolute" [class]="config.iconOnAutocompleteClass ? config.iconOnAutocompleteClass : ''">{{ config.showIconOnAutocomplete ? config.iconOnAutocomplete : '' }}</mat-icon>
          <mat-chip
            [class]="config.styleClass"
            *ngFor="let option of (config.value ? config.value : options); let i = index"
            selectable="true"
            removable="true"
            (removed)="remove(option.value, i)"
          >
            {{ option.value }}
            <mat-icon *ngIf="!config.removeChipIcon && option.type === 'field' && !config.disabled" matChipRemove>cancel</mat-icon>
          </mat-chip>
          <input
            #optionInput
            matInput
            type="text"
            [placeholder]="
              config.placeholder ? (config.placeholder | translate) : ''
            "
            [formControl]="optionCtrl"
            [matAutocomplete]="auto"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="add($event)"
          />
        </mat-chip-list>
        <mat-autocomplete
          #auto="matAutocomplete"
          (optionSelected)="selected($event)"
          [displayWith]="functionFn"
        >
          <mat-option
            *ngFor="
              let option of filteredOptions | async;
              trackBy: trackByIndex
            "
            [value]="option"
          >
            {{
              config.fieldToShowAutocomplete
                ? option[config.fieldToShowAutocomplete]
                : option
            }}
          </mat-option>
        </mat-autocomplete>
        <errors-field-form
          [config]="config"
          [group]="group"
        ></errors-field-form>
      </mat-form-field>
    </div>

ts

export class FormAutocompleteMultiConditionsComponent implements Field, OnInit {
  separatorKeysCodes: number[] = [ENTER, COMMA];
  optionCtrl = new FormControl();
  @ViewChild('optionInput') optionInput!: ElementRef<HTMLInputElement>;
  config!: AutocompleteConditionsFieldConfig;
  group!: FormGroup;
  listAutocompleteCopy: {type: 'field' | 'condition' | 'operator' | 'value'; value: string; isCompound?: boolean}[] | undefined = [];
  objectKeys = Object.keys;
  options: {type: 'field' | 'condition' | 'operator' | 'value'; value: string; isCompound?: boolean}[] = [];
  filteredOptions: Observable<any[] | undefined> | undefined;
  functionFn = this.displayFn.bind(this);

  constructor() { }

  ngOnInit(): void {
    if(this.config.disabled) {
      this.optionCtrl.disable();
    }
    this.options = this.config.value;
    this.listAutocompleteCopy = this.config.listAutocomplete?.slice();
    this.filteredOptions = this.optionCtrl.valueChanges.pipe(
      startWith(''),
      debounceTime(150),
      map((value) => {
        if (value) {
          return typeof value === 'string' ||
            !this.config.fieldToShowAutocomplete
            ? value
            : value[this.config.fieldToShowAutocomplete];
        }
      }),
      map((field) =>
        field && this.listAutocompleteCopy ? this._filter(field, true) : []
      )
    );
  }
}

这是一个演示 https://stackblitz.com/edit/angular-ivy-uwnyev，因为 ts 代码比我在这里显示的代码更多。

为什么表单控件中的 disable() 功能不起作用？

Answer 1

您需要在视图初始化后禁用输入。否则，您将禁用尚未创建的 DOM 元素。工作 StackBlitz.

  ngAfterViewInit() {
    if (this.config.disabled) {
      this.optionCtrl.disable();
    }
  }

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

Angular mat-autocomplete disable input FormControl not working

angular-material

angular

mat-autocomplete