如何在表格中发送芯片列表。即使元素仍然存在,我的提交按钮也被禁用。所以如何发送标签数组。请帮助!
这是我的表单form
下面是到目前为止我完成的代码。
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let tag of Tags"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(tag)">
{{tag}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="tags"
[formControl]="tagsSet"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
removable = true;
addOnBlur = false;
separatorKeysCodes: number[] = [ENTER, COMMA];
Tags: string[] = [];
this.testSuiteForm = new FormGroup({
tagsSet: new FormControl(null, [Validators.required]),
});
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our tag
if ((value || '').trim()) {
this.Tags.push(value.trim());
}
// Reset the input value
if (input) {
input.value = '';
}
this.tagsSet.setValue(null);
}
remove(Tags: string): void {
const index = this.Tags.indexOf(Tags);
if (index >= 0) {
this.Tags.splice(index, 1);
}
}
get tagsSet() {
return <FormArray>this.testSuiteForm.get('tagsSet');
}
答案 0 :(得分:1)
在ts文件中调用add()
函数时,可以将setValue用于formControl
添加基于JSON的字符串
this.testSuiteForm.controls['tagsSet'].setValue(JSON.stringify(this.Tags));
或
添加逗号分隔的字符串
this.testSuiteForm.controls['tagsSet'].setValue(this.Tags.toString());