What is the best way to retain all checkbox selections from a form upon submission?

Question

What is the best way to retain all checkbox selections from a form upon submission?

I have a batch of checkboxes that correspond to the profiles I intend to store in the database.

HTML:

<tr *ngFor="let profile of profiles | async">
  <input type='checkbox' name="profiles" value='{{profile.id}}' ng-model='profile.checked'> {{profile.name}}
  <td>
    {{profile.id}}
  </td>

Next, in the TypeScript file, I aim to loop through the list of profiles and invoke the create profile service for those that are checked. The service expects a single profile, so I need to iterate through and verify if the checkbox is selected before calling the Spring Boot service.

Any suggestions on how to achieve this?

TYPESCRIPT.TS

//Your code recommendations here

//Calling the service
this.profileService.createProfile(profile)

angular typescript

Answer 1

Answer №1

Make sure to assign an Id to input checkboxes similar to the example below:

id="profile{{profile.id}}"

profileData:any=[];

  ngOnInit() {
    this.fetchProfiles();
    }

 fetchProfiles() {
    this.profileService.getProfileList()
      .subscribe(res=> {
        if (res) {
          this.profiles = res;
          this.profileData = this.profiles;
         }
      })
  }

 submit() 
  {

    for(var i= 0;i < this.profileData.length ; i++){  
    var id = "profiles" + this.profileData[i].id;
    var isChecked = (<HTMLInputElement>document.getElementById(id)).checked;   
    if(isChecked)
    {
    this.profileService.createProfile(profile)
     }
    else
     {

      }
  }

Following these steps should resolve your current issues.

Answer 2

Make sure to assign an Id to input checkboxes similar to the example below:

id="profile{{profile.id}}"

profileData:any=[];

  ngOnInit() {
    this.fetchProfiles();
    }

 fetchProfiles() {
    this.profileService.getProfileList()
      .subscribe(res=> {
        if (res) {
          this.profiles = res;
          this.profileData = this.profiles;
         }
      })
  }

 submit() 
  {

    for(var i= 0;i < this.profileData.length ; i++){  
    var id = "profiles" + this.profileData[i].id;
    var isChecked = (<HTMLInputElement>document.getElementById(id)).checked;   
    if(isChecked)
    {
    this.profileService.createProfile(profile)
     }
    else
     {

      }
  }

Following these steps should resolve your current issues.

Answer 3

Answer №2

For clarity, I will provide the complete code below:

HTML:

<h3>Create User</h3>
<div [hidden]="submitted" style="width: 400px;">
    <form (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" required [(ngModel)]="user.name" name="name">
        </div>

        <div class="form-group">
            <label for="phone">Phone</label>
            <input type="text" class="form-control" id="phone" required [(ngModel)]="user.phone" name="phone">
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" id="email" required [(ngModel)]="user.email" name="email">
        </div>

        <h4>Profiles</h4>
        <table class="table table-striped">
         <thead>
           <tr>
             <td>Enable/Disable</td>
             <td>ID</td></tr>
         </thead>
         <tbody>
            <tr *ngFor="let profile of profileservice | async">
             <input type='checkbox' name="profile" value='{{profile.id}}' id="profile{{profile.id}}" ng-model='profile.checked'> {{profile.name}}
             <td>
               {{profile.id}}
           </td>
           <td>
           </td>
       </tr>
   </tbody>
</table>

<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>

<div [hidden]="!submitted">
    <h4>You submitted successfully!</h4>
</div>

TS:

import { UserService } from './../user.service';
import { User } from './../user';
import { Component, OnInit } from '@angular/core';
import { ProfileService } from './../profile.service';
import { Profile } from "./../profile";
import { Observable } from "rxjs";
import { UserProfileService } from './../userprofile.service';

@Component({
  selector: 'app-create-user',
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit {

  user: User = new User();
  submitted = false;
  profilesservice: Observable<Profile[]>;
  response: any;
  constructor(private userService: UserService, private profileService: ProfileService, private userprofileService: UserProfileService) { }

  ngOnInit() {
    this.profilesservice = this.profileService.getPerfisList();
  }

  newUser(): void {
    this.submitted = false;
    this.user = new User();
  }

save() {
    this.userService.createUser(this.user)
      .subscribe(res => {
        this.response = res;
        console.log(res);
        this.user = new User();

        for(var i= 0;i < this.profilesservice.length ; i++){  
          var id = "profiles" + this.profilesservice[i].id;
          var resval = (<HTMLInputElement>document.getElementById(id)).value;   
          if(resval)
          {
            //Here I want to call this.userprofileService.createUserProfile(profile)
          }
          else
          {
            alert(2);
          }
        }
    });
  }

  onSubmit() {
    this.submitted = true;
    this.save();
  }
}

Answer 4

For clarity, I will provide the complete code below:

HTML:

<h3>Create User</h3>
<div [hidden]="submitted" style="width: 400px;">
    <form (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" required [(ngModel)]="user.name" name="name">
        </div>

        <div class="form-group">
            <label for="phone">Phone</label>
            <input type="text" class="form-control" id="phone" required [(ngModel)]="user.phone" name="phone">
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" id="email" required [(ngModel)]="user.email" name="email">
        </div>

        <h4>Profiles</h4>
        <table class="table table-striped">
         <thead>
           <tr>
             <td>Enable/Disable</td>
             <td>ID</td></tr>
         </thead>
         <tbody>
            <tr *ngFor="let profile of profileservice | async">
             <input type='checkbox' name="profile" value='{{profile.id}}' id="profile{{profile.id}}" ng-model='profile.checked'> {{profile.name}}
             <td>
               {{profile.id}}
           </td>
           <td>
           </td>
       </tr>
   </tbody>
</table>

<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>

<div [hidden]="!submitted">
    <h4>You submitted successfully!</h4>
</div>

TS:

import { UserService } from './../user.service';
import { User } from './../user';
import { Component, OnInit } from '@angular/core';
import { ProfileService } from './../profile.service';
import { Profile } from "./../profile";
import { Observable } from "rxjs";
import { UserProfileService } from './../userprofile.service';

@Component({
  selector: 'app-create-user',
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit {

  user: User = new User();
  submitted = false;
  profilesservice: Observable<Profile[]>;
  response: any;
  constructor(private userService: UserService, private profileService: ProfileService, private userprofileService: UserProfileService) { }

  ngOnInit() {
    this.profilesservice = this.profileService.getPerfisList();
  }

  newUser(): void {
    this.submitted = false;
    this.user = new User();
  }

save() {
    this.userService.createUser(this.user)
      .subscribe(res => {
        this.response = res;
        console.log(res);
        this.user = new User();

        for(var i= 0;i < this.profilesservice.length ; i++){  
          var id = "profiles" + this.profilesservice[i].id;
          var resval = (<HTMLInputElement>document.getElementById(id)).value;   
          if(resval)
          {
            //Here I want to call this.userprofileService.createUserProfile(profile)
          }
          else
          {
            alert(2);
          }
        }
    });
  }

  onSubmit() {
    this.submitted = true;
    this.save();
  }
}

Answer 5

Answer №3

Attempting to make changes to the profile? To successfully edit, adjust ng-model='profile.checked' to [(ng-model)]='profile.checked'. Your current syntax will not establish a connection.

Answer 6

Attempting to make changes to the profile? To successfully edit, adjust ng-model='profile.checked' to [(ng-model)]='profile.checked'. Your current syntax will not establish a connection.

What is the best way to retain all checkbox selections from a form upon submission?

Answer №1

Answer №2

Answer №3

Similar questions

Using a generic type as a value in an abstract class <T, K extends keyof T> allows for flexible and dynamic data manipulation

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

Tips for styling the Button component in the shadcn/ui library for maximum impact

Retrieve the status callback function from the service

Error message stating: "The 'MktoForms2' property is not recognized within the scope of 'Window & typeof globalThis'."

What type of event does the Input element in material-ui v1 listen for?

Skip creating declarations for certain files

Creating an Angular 2 project with DevExtreme in Visual Studio 2017/2015: A step-by-step guide

Navigating from Angular 16 to Flask and experiencing browser refresh: A guide on redirecting to the 'root' path

Center align the mat-expansion-panel material component in a vertical orientation

How can I use a string from an array as a key in an object using TypeScript?

Top approach for Constructing Angular Front-End Forms with User Input

Enhance React component props for a styled component element using TypeScript

Retrieving Data from API in Angular 6/7 upon Navigating Back to Previously Visited Page

Tips for avoiding storage issues in Angular Server-Side Rendered application using guards and services (Angular V17)

Issue encountered with Typescript and Request-Promise: Attempting to call a type that does not have a call signature available

Outputting a JS file per component using Rollup and Typescript

Tips for sending back a response after a request (post | get) is made:

Error encountered when attempting to pass i18next instance to I18nextProvider

Using TypeScript's conditional types for assigning types in React