Привязать объект к полю ввода автозаполнения мат в реактивной форме - PullRequest
Новая
       31

Привязать объект к полю ввода автозаполнения мат в реактивной форме

0 голосов
/ 25 сентября 2018

Я сохраняю входные данные формы в хранилище NGRX.Я хочу связать сохраненные данные обратно в форму позже.

Итак, у меня есть реактивная форма, как показано ниже. 

<form [formGroup]="searchForm" id="searchForm" style="width:100%;height:70%" (ngSubmit)="onSubmit()">
   <mat-form-field>
   <input type="text" placeholder="Direction" aria-label="Assignee" formControlName="direction" matInput [matAutocomplete]="autoDirection">
     <mat-autocomplete #autoDirection="matAutocomplete" placeholder="Direction" [displayWith]="displayFn">
     <mat-option *ngFor="let directions of filteredDirectionList | async " [value]="directions">{{directions.name}}</mat-option>
     </mat-autocomplete>
   </mat-form-field>
 </form>

Ниже приведен файл TS 

 searchForm: FormGroup;
  export const directionList: Array<any> = [{ name: 'Out', value: '1' }, { name: 'In', value: '2' } ];

  ngOnInit(){

 this.searchForm = this.formBuilder.group({
  direction: [null, Validators.compose([Validators.nullValidator, this.valueSelected(this.directionList)])],
 });

  this.filteredDirectionList = of(this.directionList);

   }

 valueSelected(myArray: any[]): ValidatorFn {
 return (c: AbstractControl): { [key: string]: boolean } | null => {
  if (c && c.value && c.value !== '') {
    const selectboxValue = c.value;
    const pickedOrNot = myArray.filter(alias =>
      alias.name === selectboxValue.name);
    if (pickedOrNot.length > 0) {
      // everything's fine. return no error. therefore it's null.
      return null;
    } else {
      // there's no matching selectboxvalue selected. so return match error.
      return { 'match': true };
    }
  }
}
}

displayFn(field?: any): string | undefined {
console.log(field ? field.name : undefined) // show undefined
return field ? field.name : undefined;;
 }

Таким образом, приведенный выше код является базовой структурой отображения отфильтрованногоmat autocomplete

Мое намерение -

Я хочу передать объект для привязки объекта к полю, чтобы он отображался при загрузке.Я попробовал следующие подходы 

// approach 1
this.searchForm.controls['direction'].setValue(this.directionList.find(obj => { return obj.value === "Out"}));

//approach 2
 this.searchForm.value.direction = {name: "Out", value: "1"};

Мой намеренный вывод ниже:

Intented Ouput

Но я просто получаю пустое поле безсвязывание.

...