MatAutocompleteModule в форме группы - PullRequest
Новая
       27

MatAutocompleteModule в форме группы

0 голосов
/ 14 апреля 2020

У меня есть большая форма, которую пользователи могут заполнять. Мне нужно поле, которое бы автоматически заполняло ваш текст, и я остановился на компоненте Автозаполнение по Angular Материал. В примерах вы можете увидеть их, используя параметр [formControl] в элементе. Поскольку мой FormControl находится в FormGroup, мне пришлось использовать опцию formGroupName для моего элемента вместо опции [formControl]. Насколько я могу сказать, это должно быть хорошо. Однако я сталкиваюсь с одной проблемой. Вот мой элемент: 

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Choose" aria-label="study" matInput formControlName="study" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

А это мой контроллер: 

ngOnInit(): void {
  this.filteredOptions = this.profileForm.valueChanges
    .pipe(
      startWith(''),
      map(value => this._filter(value))
    );
}

private _filter(value): string[] {
  console.log(value)
  const filterValue = value.toLowerCase();

  return this.studylist.filter(option => option.toLowerCase().includes(filterValue));
}

Как видите, я включил метод журнала. Когда я регистрирую параметр value, он появляется как значение всего profileForm, как object (похоже на {value: "", value2: ""}). Я надеялся, что все, через что пройдет элемент, будет значением внутри него, но это не так. Из-за этого фильтр не работает.

Я пытался изменить value.toLowerCase() на value.study.toLowerCase(), что просто ломает вещи дальше и добавляет [formControl] в мой элемент, как они показывают в документации, но с profileForm['study'], который тоже не работает.

1 Ответ

1 голос
/ 14 апреля 2020

вам просто нужно использовать .get

this.filteredOptions = this.profileForm.get('study').valueChanges

, как вы привязываете управление к входу, не имеет значения.

...