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

Question

我正在使用自动补全根据文档中的示例，我使用占位符配置了输入。和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它发出MatAutocompleteSelectedEvent从mat-autocomplete保留viewvalue(选项选择)，值，formControlName和占位符。问题是，我无法达到最后两个(formControlName和占位符)从事件对象MatAutocompleteSelectedEvent。有办法达到这些属性吗?

Answer 1

您可以将它们传递给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将使占位符重新出现。