[英]How to use mat-autocomplete (Angular Material Autocomplete) inside FormArray (Reactive Forms)
let's say I have the following form structure:假设我有以下表单结构:
this.myForm = this.formBuilder.group({
date: ['', [Validators.required]],
notes: [''],
items: this.initItems()
});
initItems() {
var formArray = this.formBuilder.array([]);
for (let i = 0; i < 2; i++) {
formArray.push(this.formBuilder.group({
name: ['', [Validators.required]],
age: ['', [Validators.required]],
}));
}
return formArray;
}
and the name control supposed to be an autocomplete, how can I relate the all the name controls to an autocomplete list?并且名称控件应该是自动完成的,我如何将所有名称控件与自动完成列表相关联?
I solved this by relating each name
control inside the FormArray
to a filteredOption
array:我通过将
FormArray
中的每个name
控件FormArray
到一个被filteredOption
数组来解决这个问题:
ManageNameControl(index: number) {
var arrayControl = this.myForm.get('items') as FormArray;
this.filteredOptions[index] = arrayControl.at(index).get('name').valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this._filter(name) : this.options.slice())
);
}
Then After each time I build a formgroup
inside the form Array
(create new item), I need to call the above function at the new index like this:然后,每一次当我建立一个
formgroup
内部form Array
(新建项目),我需要调用上面的函数,在这样新的索引:
addNewItem() {
const controls = <FormArray>this.myForm.controls['items'];
let formGroup = this.formBuilder.group({
name: ['', [Validators.required]],
age: ['', [Validators.required]],
});
controls.push(formGroup);
// Build the account Auto Complete values
this.ManageNameControl(controls.length - 1);
}
In the .html file, we need to refer to the desired filteredOption array, we can do this by using the i
index:在 .html 文件中,我们需要引用所需的 filtersOption 数组,我们可以通过使用
i
索引来做到这一点:
<mat-option *ngFor="let option of filteredOptions[i] | async " [value]="option">
{{ option.name }}
</mat-option>
please see the detailed answer here https://stackblitz.com/edit/angular-szxkme?file=app%2Fautocomplete-display-example.ts请在此处查看详细答案https://stackblitz.com/edit/angular-szxkme?file=app%2Fautocomplete-display-example.ts
Update : to populate the array with a default value for a specific object, you can do it using the receive forms like this:更新:要使用特定对象的默认值填充数组,您可以使用如下接收表单:
let formGroup = this.fb.group({
name: [{value: { name: 'Mary' } , disabled: false}, [Validators.required]],
age: ['', [Validators.required]],
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.