我有一个简单的角度材质自动完成功能。现在,我想以编程方式设置此自动完成功能的值/所选选项。这是我的代码:
hardware.component.html
<tr>
<td class="desc pd7">Firmware</td>
<td>
<div class="form-group mb0">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Select firmware" aria-label="Number" matInput [formControl]="myControlFirmware" [matAutocomplete]="auto1" (keydown.enter)="$event.preventDefault()">
<mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFirmwares">
<mat-option *ngFor="let firmware of filteredFirmwares | async" [value]="firmware" (onSelectionChange)="getIdFromFirmware($event, firmware)">
{{ firmware.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
</td>
</tr>
Run Code Online (Sandbox Code Playgroud)
hardware.component.ts
this.miscellaneousTerminalService.getMiscellaneous('firmware').subscribe(data => {
if(data.success) {
this.availableFirmwares = data.data;
this.filteredFirmwares = this.myControlFirmware.valueChanges
.pipe(
startWith(''),
map(valFirmware => this.filterFirmwares(valFirmware))
);
}
});
filterFirmwares(valFirmware: any): any[] {
return this.availableFirmwares.filter(firmware => {
let name = valFirmware.name ? valFirmware.name : …Run Code Online (Sandbox Code Playgroud) 我在 Mat-Autocomplete 上使用 formControlName 时遇到问题。我不知道为什么,但我的 formControlName 不会发送数据,是我写错了吗?当我尝试从 HTML 中删除 [formControl] 时,它总是无法过滤。
HTML
<form [formGroup]="form" #legalDataFrm="ngForm" autocomplete="off" fxLayout.gt-sm="column" fxFlex="1 1 auto" novalidate>
<input type="text" placeholder="Pilih Bank"
formControlName="bankName" matInput
[formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)='onChangeBank()'
[displayWith]="displayFn">
<mat-option>Pilih Bank</mat-option>
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.bankName}}
</mat-option>
</mat-autocomplete>
</form>
Run Code Online (Sandbox Code Playgroud)
TS _bankService 是我获取银行列表的地方,_validationService 是我获取每个表单名称验证的地方。
export class FpLegalDataFormComponent implements OnInit, OnDestroy {
form: FormGroup;
myControl = new FormControl();
options: User[];
filteredOptions: Observable<User[]>;
constructor(
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder,
public _validationsService: ValidationsService,
public _bankService: …Run Code Online (Sandbox Code Playgroud)