Question

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

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

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

这是片段示例：

.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

编辑：

好的，我可以将其与autoComplete一起使用。这是我的代码：

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); onSubmit。

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

1 个答案: