如何以表格形式发送 mat-chip-list

Question

如何在表单中发送 mat-chip-list 。即使元素仍然存在，我的提交按钮也被禁用。那么如何发送我的标签数组。请帮助！

这是我的表格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');
  }

Answer 1

当你在 ts 文件中调用 add() 函数时，你可以将 setValue 用于 formControl

添加基于 JSON 的字符串

this.testSuiteForm.controls['tagsSet'].setValue(JSON.stringify(this.Tags));

或

添加逗号分隔字符串

this.testSuiteForm.controls['tagsSet'].setValue(this.Tags.toString());