How to remove 'commas' while displaying the selected checkboxes in angular

Question

form-page.component.html :

<h1>CAR SERVICE FORM</h1>

<form [formGroup]="form" (submit)="onSubmit()">
    <div>
        <label for="carmodel">Car Model:</label>
        <input type="text" class="form-control" formControlName="carmodel">
        <div *ngIf="form.controls['carmodel'].touched && form.controls['carmodel'].errors">
          <div *ngIf="form.controls['carmodel'].hasError('required')" class="error">Carmodel is required.</div>
          <div *ngIf="form.controls['carmodel'].hasError('minlength')">Carmodel should be minimum 3 characters.</div>
        </div>
    </div>

    <div>
        <label for="carnum">Car Number:</label>
        <input type="text" class="form-control" formControlName="carnum">
        <div *ngIf="form.controls['carnum'].touched && form.controls['carnum'].errors">
          <div *ngIf="form.controls['carnum'].hasError('required')" class="error">carnum is required.</div>
        </div>
      </div>



    <div>
        <label for="contactNumber">Contact Number:</label>
        <input type="text" class="form-control" formControlName="contactNumber">
        <div *ngIf="form.controls['contactNumber'].touched && form.controls['contactNumber'].errors">
          <div *ngIf="form.controls['contactNumber'].hasError('required')" class="error">Contact number is required.</div>
        </div>
    </div>
  
    <div>
      <label>Type of Service:</label>
      <div>
        <label><input type="radio" name="option" value="Waterwash" formControlName="option"> Waterwash </label>
      </div>
      <div>
        <label><input type="radio" name="option" value="Fullservice" formControlName="option"> Fullservice </label>
      </div>
      <div *ngIf="form.controls['option'].touched && form.controls['option'].invalid">
        <div class="error">Please select an option</div>
      </div>
    </div>
<div>
    <label>Addons:</label>
    <div *ngFor="let cbx of checkboxesFormArray.controls; let i = index">
      <label formArrayName="checkbox">
        <input type="checkbox" [formControlName]="i" (change)="checkedChanged($event)" [value]="checkboxes[i].value">
        {{checkboxes[i].name}}
      </label>
    </div>  
  </div>

    <div>
      <label>State:</label>
      <select formControlName="state" (change)="onStateChange()">
        <option *ngFor="let state of states" [value]="state">{{state}}</option>
      </select>
      <div *ngIf="form.controls['state'].touched && form.controls['state'].invalid">
        <div class="error">Please select a state</div>
      </div>
    </div>
 
    <div>
        <label>City:</label>
        <select formControlName="city">
            <option *ngFor="let city of cities[form.controls['state'].value]" [value]="city">{{city}}</option>
        </select>
        <div *ngIf="form.controls['city'].touched && form.controls['city'].invalid">
            <div class="error">Please select a city</div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="button" (click)="Reset()">Reset</button>
    <button (click)="goBack()">back</button>


    

</form>
<table>
    <thead>
      <tr>
        <th>Car Model</th>
        <th>Car Number</th>
        <th>Contact Number</th>
        <th>Type of Service</th>
        <th>Options</th>
        <th>State</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let car of cars">
        <td>{{ car.carmodel }}</td>
        <td>{{ car.carnum }}</td>
        <td>{{ car.contactNumber }}</td>
        <td>{{ car.option }}</td>
        <td>{{ car.checkbox }}</td>
        <td>{{ car.state }}</td>
        <td>{{ car.city }}</td>
      </tr>
    </tbody>
  </table>

form-page.component.ts :

import { Component } from '@angular/core';
import { CommonModule, Location } from '@angular/common';
 
import { FormGroup, FormBuilder,FormControl, Validators, FormArray } from '@angular/forms';
 
import { CarServiceService } from 'src/app/services/car-service.service';
@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
  styleUrls: ['./form-page.component.css']
})
export class FormPageComponent {
//
  form: FormGroup;
  states: string[] = ['Tamilnadu', 'Kerala', 'Karnataka','Maharastra'];
  cities: {[key: string]: string[]} = {
    'Tamilnadu': ['Chennai', 'Coimbatore','Madurai'],
    'Kerala': ['Trivandrum','Kochi','Kollam'],
    'Karnataka': ['Bangalore', 'Mysore'],
    'Maharastra': ['Mumbai', 'Pune']
  };
  checkboxes = [
    { value: '10%off First service visit', name: '10%off First service visit' },
    { value: '10%off Waterwash', name: '10%off Waterwash' },
    { value: 'Free AC Inspection', name: 'Free AC Inspection' },
  ];
//  
  cars: any[] = [];
//
  checkboxValues: string[]=[];
//
 
  get checkboxesFormArray() {
    return this.form.controls['checkbox'] as FormArray;
  }
 
  constructor(private fb: FormBuilder,private location : Location,private carServiceService :CarServiceService) {
 
 
    this.form = this.fb.group({
      carmodel :['', [Validators.required, Validators.minLength(3)]],
      carnum :['', [Validators.required]],
      contactNumber: ['', [Validators.required, Validators.pattern(/^\d{10}$/)]],
      option: ['', Validators.required],
      checkbox: new FormArray([], Validators.required),
      state: ['', Validators.required],
      city: ['', Validators.required]
    });
    this.addCheckboxes();
  }
 
 
  addCheckboxes() {
    this.checkboxes.forEach(() =>
      this.checkboxesFormArray.push(new FormControl(''))
    );
  }
 
  goBack():void{
    this.location.back();
  }
 

  onSubmit() {
    if (this.form.valid) {
//      console.log(this.form.value);
 
 
      this.carServiceService.addCar(this.form.value).subscribe(response =>{
        console.log(response);
        this.carServiceService.getCars().subscribe(cars => {
          this.cars = cars; // Set the list of cars to the response data
          console.log(this.cars);
        });  
      });
 
    } else {
      // Form is invalid, display error messages
      this.form.markAllAsTouched();
    }
  }


 
 
  Reset(){
    this.form.reset();
  }
 
  onStateChange() {
    const state = this.form.controls['state'].value;
    this.form.controls['city'].setValue('');
    if (state) {
      this.form.controls['city'].enable();
    } else {
      this.form.controls['city'].disable();
    }
  }
  checkedChanged(e:any) {
    let index = this.checkboxes.findIndex(
      (item) => item.value === e.target.value
    );
    if (e.target.checked) {
      this.checkboxesFormArray.controls[index].setValue(e.target.value);
    } else {
      this.checkboxesFormArray.controls[index].setValue('');
    }
  }

 
}

also got this service named , car-service.service.ts:


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Form } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CarServiceService {

  constructor(private http: HttpClient) { }

  addCar(formData : any): Observable<any>{
    return this.http.post<any>('https://localhost:7095/api/Forms/submit-form',formData);
  }
  getCars(): Observable<any[]> {
    return this.http.get<any[]>('https://localhost:7095/api/Forms/get-forms');
  }
  
}

Im trying to post my input values of html form from angular to asp.net core web API and then getting those values back to print them below the html form in a table format. I'm able to post every fields and get back those values but there's a small thing that bothers me. In the checkbox field, If I selected the last two checkboxes, I get the values as

,10%off Waterwash,Free AC Inspection

and on selecting just the last checkbox, I get them like

,,Free AC Inspection

or on selecting the second checkbox alone, I get the values like,

,10%off Waterwash,

Basically I want to get rid of the comma in the form array. Can someone tell me how to do that

Eliseo · Accepted Answer · 2023-04-04 07:32:37Z

1

You need create an object removing the "empty" values of the array. So in submit function you can use

onSubmit() {
    if (this.form.valid) {
      //create a new object
      const data={
        ...this.form.value, //<--all the value of your form
        checkbox:this.form.value.checkbox.filter(x=>x)
      }
      //send this object, not the form.value
      this.carServiceService.addCar(data).subscribe(response =>{
         ...
      }
 }

But really the value of your checkboxesFormArray should be always an array with true or false, e.g. [true,true,false]

As you want to pass to your API the value based in your array checkboxes the only you need are, in submit function, create a new object with the values of the form but the "checkbox property" changed

onSubmit() {
    if (this.form.valid) {
      const data={
        ...this.form.value, //<--all the value of your form
        checkbox:this.form.value.checkbox
             //will be,. e.g. [true,false,true]
             .map((x:boolean,index:number)=>x?this.checkboxes[index].value:'')
             //will be, e.g. ['10%off First service visit','','Free AC Inspection']
             
             .filter((x:string)=>x)
             //will be,e.g. ['10%off First service visit','Free AC Inspection']
             .join(',')
             //will be '10%off First service visit,Free AC Inspection'
        }

     this.carServiceService.addCar(data).subscribe(response =>{
        ...
     }
}

So we needn't use your function checkedChanged

NOTE: I don't know if you want to send the array or a string separate by commas (remove the "join" if you need an array of string in your API.

NOTE2: There're another approach that it's not use a FormArray else a simple FormControl, and use [(ngModel)] to change the FormControl. See this SO

edited Apr 4, 2023 at 7:32

answered Apr 4, 2023 at 6:33

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zack Over a year ago

hey, I updated the onSubmit function and removed checkedChanged and also removed join coz , yes I get them as a list of string in api. Now instead of getting the selected checkboxes as output , I get "commas"...I selected the first two checkboxes and got "," as output instead of printing the selected 2 checkboxes . To check this I also printed on the console to know the details and the array looks like this after selecting first two checboxes "checkbox : Array(2) 0 : null 1 : null length : 2"

Eliseo Over a year ago

@zack, ::glups:: sorry is .map((x:boolean,index:number)=>x?this.checkboxes[index].value:'') (I forget the "index")

zack Over a year ago

i too was a bit confused..k this time its just perfect

Collectives™ on Stack Overflow

How to remove 'commas' while displaying the selected checkboxes in angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related