表单组中的 MatAutocompleteModule

Question

我有一个用户可以填写的大表格。我想要一个可以自动完成文本的字段，我的目光落在了 Autocomplete component by Angular Material. In the examples, you can see them using the [formControl] option in the element. Since my FormControl is in a 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'] ，这也不起作用。

Answer 1

你只需要使用.get

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

如何将控件绑定到输入并不重要。

表单组中的 MatAutocompleteModule

MatAutocompleteModule in a formgroup

angular-material

angular

formgroups

angular9