在 Angular 中获取自动完成占位符和 formControlName

Question

我正在根据文档中的示例使用带有输入的 ma​​t-autocomplete 组件，并且我已经使用 placeholder 和 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 和占位符。问题是我无法从事件对象 MatAutocompleteSelectedEvent 到达最后两个（formControlName 和占位符）。有没有办法到达这些属性？

Answer 1

您可以将它们传递给optionSelected 的处理程序。

所以方法签名可以改为selectedValue(autoCompleteEvent: MatAutocompleteSelectedEvent, placeholder: string, controlName: string )

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

在这里猜测一下，但如果您的用例是清理控件，那么您可以在控制器中通过订阅控件更改来完成它，并像这样创建一个 observable：

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

将值设置为空字符串或 null/undefined 将使占位符重新出现。