how to send mat-chip-list in form

Viewed 4829

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');
  }

1 Answers

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());
Related