使用垫自动完成功能时无法验证角度形式

时间:2020-02-21 10:52:33

标签: angular autocomplete angular-material angular2-form-validation

我正在尝试验证具有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"},...}

0 个答案:

没有答案