angular - 自动完成输入以过滤 FormGroup 中的更多选项
问题描述
我需要实现一个简单的自动完成文本框,允许从按名称过滤和显示的对象列表中进行选择。
例如,我有一组 Country 对象,它们具有某些属性(countryName、countryCode、countryId.. 等等),我想按 countryName 在文本框中显示和过滤,但是一旦用户选择了国家,我希望整个对象被选中。
[(ngModel)]
我可以用or解决这个问题,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
元素的解决方案?
解决方案
编辑:
好的,我让它与自动完成一起工作。这是我的代码:
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);
。
推荐阅读
- ios - UITextInputAssistantItem 如何与 iOS 13 中的自定义 inputView 配合使用?
- javascript - 重新加载ajax magnific pop-up
- docker - Docker 容器因异常而失败,但 Airflow 将 docker_operator 任务标记为已通过
- javascript - 数组中的传单圆圈名称未显示(未定义圆圈1)
- orbeon - 基于 Orbeon 中重复部分的迭代控件动态值的条件
- modelica - 如何找到振荡器的谐振频率?
- jquery - 无法使用 jquery 减少 div
- sql - 请帮助使用 GROUP BY 构建 SQL SELECT 请求
- ios - 核心数据崩溃:尝试访问使用谓词获得的数据时出现 EXC_BAD_ACCESS
- sql-server - SQLServer Docker:如何备份和恢复数据 *volume*?