时间戳

首页 > 解决方案 > 在 Angular 中获取自动完成占位符和 formControlName

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

问题描述

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

标签： angularautocompleteangular-reactive-forms

解决方案

您可以将它们传递给optionSelected.

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

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

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

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

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

推荐阅读