我正在尝试验证具有mat-autocomplete的角度形式,但是我无法设置/获取属性...
这是我的代码...在此更改任何文本/未选中时,我需要告诉表单其无效,并将ID绑定到表单。另外,在更改或选择对象时,我无法从对象检索/获取ID
HTML
<input type="text"
placeholder="{{'EgWantToCompleteAProject' | translate}}"
matInput
(change)="changeInputTxt($event)"
[ngClass]="{'input-error': formSubmit && submitOvertimeRequest.controls['requestTypeId'].errors?.required || submitOvertimeRequest.controls['requestTypeId'].touched && submitOvertimeRequest.controls['requestTypeId'].errors?.required}"
id="requestTypeId"
[formControl]="overtimeTypeControl"
formControlName="requestTypeId"
[matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="optionSelectType($event);">
<mat-option *ngFor="let type of filteredOvertimeTypeOptions | async" [(value)]="type.name">{{ type.name }}</mat-option>
</mat-autocomplete>
TypeScript
overtimeTypeControl = new FormControl();
filteredOvertimeTypeOptions: Observable<GlobalOvertimeVarService["requestTypes"][]>;
...
this.filteredOvertimeTypeOptions = this.overtimeTypeControl.valueChanges.pipe(startWith(''), map(value => this._filter(value)));
...
private _filter(value: string): string[] {
return this.globalOvertimeVarService.requestTypes.map(x => x).filter(option =>
option.name.toLowerCase().includes(value.toLowerCase()));
}
我的对象看起来像
this.globalOvertimeVarService.requestTypes = [{"id":1,"name":"string1"},{"id":2,"name":"string2"},...}