如何在Angular中显示所选复选框时去掉 ‘逗号’。

huangapple
go评论103阅读模式
英文:

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

问题

你可以在处理 checkbox 值的时候，将空字符串（''）过滤掉，以避免生成额外的逗号。你可以在 onSubmit 方法中修改 checkboxValues 的代码，如下所示：

  1. onSubmit() {
  2.   if (this.form.valid) {
  3.     // ...
  5.     this.checkboxValues = this.checkboxesFormArray.value.filter(value => value !== ''); // Filter out empty strings
  6.     this.form.controls['checkbox'].setValue(this.checkboxValues);
  8.     this.carServiceService.addCar(this.form.value).subscribe(response => {
  9.       // ...
  10.     });
  12.   } else {
  13.     // Form is invalid, display error messages
  14.     this.form.markAllAsTouched();
  15.   }
  16. }

这样，checkboxValues 数组将只包含被选中的复选框的值，而不会有空字符串。这应该解决你在表格中得到额外逗号的问题。

英文:

form-page.component.html :

  1. <h1>CAR SERVICE FORM</h1>
  3. <form [formGroup]="form" (submit)="onSubmit()">
  4.     <div>
  5.         <label for="carmodel">Car Model:</label>
  6.         <input type="text" class="form-control" formControlName="carmodel">
  7.         <div *ngIf="form.controls['carmodel'].touched && form.controls['carmodel'].errors">
  8.           <div *ngIf="form.controls['carmodel'].hasError('required')" class="error">Carmodel is required.</div>
  9.           <div *ngIf="form.controls['carmodel'].hasError('minlength')">Carmodel should be minimum 3 characters.</div>
  10.         </div>
  11.     </div>
  13.     <div>
  14.         <label for="carnum">Car Number:</label>
  15.         <input type="text" class="form-control" formControlName="carnum">
  16.         <div *ngIf="form.controls['carnum'].touched && form.controls['carnum'].errors">
  17.           <div *ngIf="form.controls['carnum'].hasError('required')" class="error">carnum is required.</div>
  18.         </div>
  19.       </div>
  23.     <div>
  24.         <label for="contactNumber">Contact Number:</label>
  25.         <input type="text" class="form-control" formControlName="contactNumber">
  26.         <div *ngIf="form.controls['contactNumber'].touched && form.controls['contactNumber'].errors">
  27.           <div *ngIf="form.controls['contactNumber'].hasError('required')" class="error">Contact number is required.</div>
  28.         </div>
  29.     </div>
  30.   
  31.     <div>
  32.       <label>Type of Service:</label>
  33.       <div>
  34.         <label><input type="radio" name="option" value="Waterwash" formControlName="option"> Waterwash </label>
  35.       </div>
  36.       <div>
  37.         <label><input type="radio" name="option" value="Fullservice" formControlName="option"> Fullservice </label>
  38.       </div>
  39.       <div *ngIf="form.controls['option'].touched && form.controls['option'].invalid">
  40.         <div class="error">Please select an option</div>
  41.       </div>
  42.     </div>
  43. <div>
  44.     <label>Addons:</label>
  45.     <div *ngFor="let cbx of checkboxesFormArray.controls; let i = index">
  46.       <label formArrayName="checkbox">
  47.         <input type="checkbox" [formControlName]="i" (change)="checkedChanged($event)" [value]="checkboxes[i].value">
  48.         {{checkboxes[i].name}}
  49.       </label>
  50.     </div>  
  51.   </div>
  53.     <div>
  54.       <label>State:</label>
  55.       <select formControlName="state" (change)="onStateChange()">
  56.         <option *ngFor="let state of states" [value]="state">{{state}}</option>
  57.       </select>
  58.       <div *ngIf="form.controls['state'].touched && form.controls['state'].invalid">
  59.         <div class="error">Please select a state</div>
  60.       </div>
  61.     </div>
  62.  
  63.     <div>
  64.         <label>City:</label>
  65.         <select formControlName="city">
  66.             <option *ngFor="let city of cities[form.controls['state'].value]" [value]="city">{{city}}</option>
  67.         </select>
  68.         <div *ngIf="form.controls['city'].touched && form.controls['city'].invalid">
  69.             <div class="error">Please select a city</div>
  70.         </div>
  71.     </div>
  73.     <button type="submit" class="btn btn-primary">Submit</button>
  74.     <button type="button" (click)="Reset()">Reset</button>
  75.     <button (click)="goBack()">back</button>
  78.     
  80. </form>
  81. <table>
  82.     <thead>
  83.       <tr>
  84.         <th>Car Model</th>
  85.         <th>Car Number</th>
  86.         <th>Contact Number</th>
  87.         <th>Type of Service</th>
  88.         <th>Options</th>
  89.         <th>State</th>
  90.         <th>City</th>
  91.       </tr>
  92.     </thead>
  93.     <tbody>
  94.       <tr *ngFor="let car of cars">
  95.         <td>{{ car.carmodel }}</td>
  96.         <td>{{ car.carnum }}</td>
  97.         <td>{{ car.contactNumber }}</td>
  98.         <td>{{ car.option }}</td>
  99.         <td>{{ car.checkbox }}</td>
  100.         <td>{{ car.state }}</td>
  101.         <td>{{ car.city }}</td>
  102.       </tr>
  103.     </tbody>
  104.   </table>

form-page.component.ts :

  1. import { Component } from '@angular/core';
  2. import { CommonModule, Location } from '@angular/common';
  3.  
  4. import { FormGroup, FormBuilder,FormControl, Validators, FormArray } from '@angular/forms';
  5.  
  6. import { CarServiceService } from 'src/app/services/car-service.service';
  7. @Component({
  8.   selector: 'app-form-page',
  9.   templateUrl: './form-page.component.html',
  10.   styleUrls: ['./form-page.component.css']
  11. })
  12. export class FormPageComponent {
  13. //
  14.   form: FormGroup;
  15.   states: string[] = ['Tamilnadu', 'Kerala', 'Karnataka','Maharastra'];
  16.   cities: {[key: string]: string[]} = {
  17.     'Tamilnadu': ['Chennai', 'Coimbatore','Madurai'],
  18.     'Kerala': ['Trivandrum','Kochi','Kollam'],
  19.     'Karnataka': ['Bangalore', 'Mysore'],
  20.     'Maharastra': ['Mumbai', 'Pune']
  21.   };
  22.   checkboxes = [
  23.     { value: '10%off First service visit', name: '10%off First service visit' },
  24.     { value: '10%off Waterwash', name: '10%off Waterwash' },
  25.     { value: 'Free AC Inspection', name: 'Free AC Inspection' },
  26.   ];
  27. //  
  28.   cars: any[] = [];
  29. //
  30.   checkboxValues: string[]=[];
  31. //
  32.  
  33.   get checkboxesFormArray() {
  34.     return this.form.controls['checkbox'] as FormArray;
  35.   }
  36.  
  37.   constructor(private fb: FormBuilder,private location : Location,private carServiceService :CarServiceService) {
  38.  
  39.  
  40.     this.form = this.fb.group({
  41.       carmodel :['', [Validators.required, Validators.minLength(3)]],
  42.       carnum :['', [Validators.required]],
  43.       contactNumber: ['', [Validators.required, Validators.pattern(/^\d{10}$/)]],
  44.       option: ['', Validators.required],
  45.       checkbox: new FormArray([], Validators.required),
  46.       state: ['', Validators.required],
  47.       city: ['', Validators.required]
  48.     });
  49.     this.addCheckboxes();
  50.   }
  51.  
  52.  
  53.   addCheckboxes() {
  54.     this.checkboxes.forEach(() =>
  55.       this.checkboxesFormArray.push(new FormControl(''))
  56.     );
  57.   }
  58.  
  59.   goBack():void{
  60.     this.location.back();
  61.   }
  62.  
  64.   onSubmit() {
  65.     if (this.form.valid) {
  66. //      console.log(this.form.value);
  67.  
  68.  
  69.       this.carServiceService.addCar(this.form.value).subscribe(response =>{
  70.         console.log(response);
  71.         this.carServiceService.getCars().subscribe(cars => {
  72.           this.cars = cars; // Set the list of cars to the response data
  73.           console.log(this.cars);
  74.         });  
  75.       });
  76.  
  77.     } else {
  78.       // Form is invalid, display error messages
  79.       this.form.markAllAsTouched();
  80.     }
  81.   }
  84.  
  85.  
  86.   Reset(){
  87.     this.form.reset();
  88.   }
  89.  
  90.   onStateChange() {
  91.     const state = this.form.controls['state'].value;
  92.     this.form.controls['city'].setValue('');
  93.     if (state) {
  94.       this.form.controls['city'].enable();
  95.     } else {
  96.       this.form.controls['city'].disable();
  97.     }
  98.   }
  99.   checkedChanged(e:any) {
  100.     let index = this.checkboxes.findIndex(
  101.       (item) => item.value === e.target.value
  102.     );
  103.     if (e.target.checked) {
  104.       this.checkboxesFormArray.controls[index].setValue(e.target.value);
  105.     } else {
  106.       this.checkboxesFormArray.controls[index].setValue('');
  107.     }
  108.   }
  110.  
  111. }

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

  2. import { Injectable } from '@angular/core';
  3. import { HttpClient } from '@angular/common/http';
  4. import { Observable } from 'rxjs';
  5. import { Form } from '@angular/forms';
  7. @Injectable({
  8.   providedIn: 'root'
  9. })
  10. export class CarServiceService {
  12.   constructor(private http: HttpClient) { }
  14.   addCar(formData : any): Observable<any>{
  15.     return this.http.post<any>('https://localhost:7095/api/Forms/submit-form',formData);
  16.   }
  17.   getCars(): Observable<any[]> {
  18.     return this.http.get<any[]>('https://localhost:7095/api/Forms/get-forms');
  19.   }
  20.   
  21. }

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

  1. ,10%off Waterwash,Free AC Inspection

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

  1. ,,Free AC Inspection

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

  1. ,10%off Waterwash,

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

答案1

得分: 1

你需要创建一个对象，删除数组中的"empty"值。因此，在提交函数中，您可以使用以下代码：

  1. onSubmit() {
  2.     if (this.form.valid) {
  3.         // 创建一个新对象
  4.         const data = {
  5.             ...this.form.value, //<--表单的所有值
  6.             checkbox: this.form.value.checkbox.filter(x => x)
  7.         };
  8.         // 发送此对象，而不是form.value
  9.         this.carServiceService.addCar(data).subscribe(response => {
  10.             // ...
  11.         });
  12.     }
  13. }

但是，实际上，您的复选框表单数组的值应始终是一个包含true或false的数组，例如[true, true, false]。

如果您想要根据复选框的数组值传递给API，您只需要在提交函数中创建一个新对象，将表单的值与"checkbox属性"更改如下：

  1. onSubmit() {
  2.     if (this.form.valid) {
  3.         const data = {
  4.             ...this.form.value, //<--表单的所有值
  5.             checkbox: this.form.value.checkbox
  6.                 // 将会是，例如 [true, false, true]
  7.                 .map((x: boolean, index: number) => x ? this.checkboxes[index].value : '')
  8.                 // 将会是，例如 ['10%off First service visit', '', 'Free AC Inspection']
  9.                 .filter((x: string) => x)
  10.                 // 将会是，例如 ['10%off First service visit', 'Free AC Inspection']
  11.                 .join(',')
  12.                 // 将会是 '10%off First service visit,Free AC Inspection'
  13.         };
  15.         this.carServiceService.addCar(data).subscribe(response => {
  16.             // ...
  17.         });
  18.     }
  19. }

这样，您就不需要使用您的checkedChanged函数。

注意：我不知道您是想发送数组还是一个由逗号分隔的字符串（如果需要API中的字符串数组，请删除"join"）。

注意2：还有另一种方法，不使用FormArray，而是使用一个简单的FormControl，并使用[(ngModel)]来更改FormControl。可以参考这个Stack Overflow链接。

英文:

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

  1. onSubmit() {
  2.     if (this.form.valid) {
  3.       //create a new object
  4.       const data={
  5.         ...this.form.value, //&lt;--all the value of your form
  6.         checkbox:this.form.value.checkbox.filter(x=&gt;x)
  7.       }
  8.       //send this object, not the form.value
  9.       this.carServiceService.addCar(data).subscribe(response =&gt;{
  10.          ...
  11.       }
  12.  }

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

  1. onSubmit() {
  2.     if (this.form.valid) {
  3.       const data={
  4.         ...this.form.value, //&lt;--all the value of your form
  5.         checkbox:this.form.value.checkbox
  6.              //will be,. e.g. [true,false,true]
  7.              .map((x:boolean,index:number)=&gt;x?this.checkboxes[index].value:&#39;&#39;)
  8.              //will be, e.g. [&#39;10%off First service visit&#39;,&#39;&#39;,&#39;Free AC Inspection&#39;]
  9.              
  10.              .filter((x:string)=&gt;x)
  11.              //will be,e.g. [&#39;10%off First service visit&#39;,&#39;Free AC Inspection&#39;]
  12.              .join(&#39;,&#39;)
  13.              //will be &#39;10%off First service visit,Free AC Inspection&#39;
  14.         }
  16.      this.carServiceService.addCar(data).subscribe(response =&gt;{
  17.         ...
  18.      }
  19. }

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

huangapple
  • 本文由 发表于 2023年4月4日 13:59:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/75925939.html
  • angular
  • formarray
  • forms
  • httpclient
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定