How to convert array value recieved from dropdown multiselect to string in angular 5

Question

I have used a material dropdown multiselect through which the users can select multiple data. when the data is being sent to the component the data is recieved in an array format which is not accepted by API to insert into database. My view code:

      <mat-input-container>
    <input matInput type="number" formControlName="around" placeholder="Around" required >
    <p class="invalid-text" *ngIf="JifForm.controls.around.invalid &&
            (JifForm.controls.around.dirty || JifForm.controls.around.touched)">
      <span *ngIf="JifForm.controls.around.errors.required">Around is required.</span></p>
  </mat-input-container>

      <mat-form-field>
    <mat-select placeholder="Front Pass" formControlName="job_front_color" required multiple>
      <mat-option  value="pink">Pink</mat-option>
      <mat-option  value="black">Black</mat-option>
    </mat-select>
  </mat-form-field>

it gives data in the following format :

job_deno: 12345
job_front_color:(2) ["pink", "black"]

Is there a way so that i get the value in job_front_color in string format too like pink, black so that the value can pass through the api as string

I pass data from the form to api through the following code:

  onSubmit(form) {
  //console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAa', form);
return this._http.post('http://localhost:8000/api/v1/jobInstructionForm ', form, {headers: this.headers}).subscribe(res => {
  this.flashMsg.flashMsg('success', 'added', 'JIF added');
  this._router.navigate( ['pages/jif'] );
} );

}

Answer 1

You can use Array.prototype.join() - Docs

In your case, what you want is join(', ')

let arr = ["pink", "black"]
console.log(arr.join(', '));

---

EDIT

If you only want to send that string to your API, just do this:

onSubmit(form) {
  const stringOfColours = form.job_front_color.join(', );
  return this._http.post('http://localhost:8000/api/v1/jobInstructionForm ', stringOfColours, {
    headers: this.headers
  }).subscribe(res => {
    this.flashMsg.flashMsg('success', 'added', 'JIF added');
    this._router.navigate(['pages/jif']);
  });
}