在 Angular 中獲取自動完成占位符和 formControlName

Question

根據文檔中的示例，我正在使用帶有輸入的mat-autocomplete組件，並且我已經使用占位符和formControlName配置了輸入，如下所示：

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Persona*" aria-label="Number" matInput formControlName="idPersona"
    [matAutocomplete]="autoPersonas">

    <mat-autocomplete autoActiveFirstOption #autoPersonas="matAutocomplete"
        [displayWith]="displayPersona(filteredOptionsPersonas | async)" (optionSelected)="selectedValue($event)">
        <mat-option *ngFor="let option of filteredOptionsPersonas" [value]="option.idPersona">
            <p>{{option.nombre}}</p>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

我還使用optionSelected從 mat-autocomplete 發出MatAutocompleteSelectedEvent以保持視圖值（選擇的選項）、值、formControlName 和占位符。 問題是我無法從事件 object MatAutocompleteSelectedEvent到達最后兩個（formControlName 和占位符）。 有沒有辦法達到這些屬性？

Answer 1

您可以將它們傳遞給optionSelected的處理程序。

所以方法簽名可以更改為selectedValue(autoCompleteEvent: MatAutocompleteSelectedEvent, placeholder: string, controlName: string )

在您的模板中： (optionSelected)="selectedValue($event, 'Persona*', 'idPersona')" 。

在這里猜測一下，但如果您的用例是清理控件，那么您可以在 controller 中執行此操作，訂閱控件更改並像這樣進行觀察：

this.formGroup.get('idPersona').valueChanges.subscribe(() => {
  this.formGroup.get('idPersona').setValue(null, {emitEvent: false});
});

將值設置為空字符串或 null/undefined 將使占位符重新出現。