Невозможно проверить angular форму при использовании mat-autocomplete - PullRequest
Новая
       42

Невозможно проверить angular форму при использовании mat-autocomplete

0 голосов
/ 21 февраля 2020

Я пытаюсь проверить angular форму, в которой есть автозаполнение mat, но я не могу установить / получить свойства ...

Вот мой код ... Здесь при изменении любого текста / unselected Мне нужно сообщить форме, что она недействительна, и я привязываю 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"},...}
...