自动完成输入以过滤 FormGroup 中的更多选项

Question

我需要实现一个简单的自动完成文本框，允许从按名称过滤和显示的对象列表中进行选择。

例如，我有一组 Country 对象，它们具有某些属性（countryName、countryCode、countryId.. 等等），我想按 countryName 在文本框中显示和过滤，但是一旦用户选择了国家，我就想要整个对象被选中。

我可以用[(ngModel)] 或FormControl 解决这个问题，但现在我必须使用FormGroup 并且我不知道如何使用属性formControlName="..."

这里是 sn-p 示例：

.html

<form [formGroup]="formGroup">
 [...]
  <mat-form-field>
    <input type="text" placeholder="{{'BIRTH_COUNTRY'|translate}}" matInput formControlName="birthCountry"
      [matAutocomplete]="auto" required>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let country of countries" [value]="country">
        {{country.CountryName}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

.ts

export class PersonalDataComponent implements OnInit {
  public formGroup: FormGroup;

  countries?: Country[];

  constructor(public service: RegisterService) {
    this.formGroup = new FormGroup({
      name: new FormControl(null, Validators.required),
      lastName: new FormControl(null, Validators.required),
      gender: new FormControl(null, Validators.required),
      birthDate: new FormControl(null, Validators.compose([Validators.required, legalAgeValidator])),
      birthCountry: new FormControl(null, Validators.required),
    });

    displayFn(country ?: Country): string | undefined {
      return country ? country.CountryName : undefined;
    }

  }
}

是否有任何解决方案可以使用自动完成文本框/选择来过滤对象列表并将所选元素绑定到 FormGroup 元素？

Answer 1

编辑：

好的，我让它与自动完成一起工作。这是我的代码：

HTML：

        <mat-form-field>
          <input type="text" placeholder="Country" aria-label="Country" matInput formControlName="country"
            [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let country of filteredCountries | async" [value]="country">
              {{country.name}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

TS： @Component 之前

import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import { FormBuilder, Validators } from '@angular/forms';
export interface Country {
  name: string;
  id: string;
}

构造函数之前：

 public formGroup;
 countries: Country[] = [{"name": 'Greece', "id": "1"}, {"name": 'Italy', "id": "2"}, {"name": 'Spain', "id": "3"}]
 filteredCountries: Observable<Country[]>;

构造函数：

constructor(public formBuilder: FormBuilder)

构造函数之后：

this.formGroup =  this.formBuilder.group({
country: ['', Validators.required]});

在 ngOnInit 上：

 this.filteredCountries = this.formGroup.get('country').valueChanges
      .pipe(
        startWith<string | Country>(''),
        map(value => typeof value === 'string' ? value : (<any>value).name),
        map(name => name ? this._filter(name) : this.countries.slice())
      );

附加功能：

 displayFn(country?: Country): string | undefined {
    return country ? country.name : undefined;
  }

  private _filter(name): Country[] {
    const filterValue = name.toLowerCase();

    return this.countries.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
  }

我使用材料文档使其工作，并将其添加到我的现有项目中。如果您发现任何地区参考而不是国家/地区，因为那是我项目中的关键字，我提前道歉。这将使值占据整个对象。可以测试打印console.log(this.formGroup.value); 提交。