在Angular Material中,MatChipList是用于显示和管理标签(chips)的组件。在动态的FormArray上使用MatChipList可以通过以下步骤完成:
{{ chip.value }}
cancel
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-chip-list',
templateUrl: './chip-list.component.html',
styleUrls: ['./chip-list.component.scss']
})
export class ChipListComponent implements OnInit {
form: FormGroup;
formArray: FormArray;
formControlName = 'chips';
separatorKeysCodes: number[] = [ENTER, COMMA];
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
chips: this.fb.array([])
});
this.formArray = this.form.get('chips') as FormArray;
}
addChip(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
if ((value || '').trim()) {
this.formArray.push(this.fb.control(value.trim()));
}
if (input) {
input.value = '';
}
}
removeChip(index: number): void {
if (index >= 0) {
this.formArray.removeAt(index);
}
}
}
在这个示例中,我们使用FormBuilder创建了一个FormGroup,并在FormGroup中创建了一个FormArray用于存储标签(chips)。在addChip方法中,我们将输入的值添加到FormArray中,然后清空输入框。在removeChip方法中,我们通过索引从FormArray中删除相应的标签。
请注意,上述代码中的ENTER
和COMMA
是从@angular/cdk/keycodes
中导入的常量,用于定义可以触发添加标签操作的按键。
希望这个示例能帮助到你在动态的FormArray上使用MatChipList!