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