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

Question

How to send mat-chip-list inside a form .Even though elements are there still my submit button is disabled.So How Can I send my tag array.please help!

here is my form form

below is my code that I've done so far.

<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

When you call add() function in ts file you can use setValue for formControl

Adding JSON based string

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

or

Adding comma separated string

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