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

Guide to building a static method generator in TypeScript

Align and resize image using CSS styling

Consequences of eliminating Angular component wrapper tags from the DOM

Resolve the result of the HttpComponent within the Service component

Utilize Ionic for mobile development - Demonstrating the process of displaying a save prompt on Android devices

What is the process for incorporating a compiled JavaScript library into a TypeScript project?

What is the best way to limit input to only numbers and special characters?

Creating a Dynamic Clear Button for a Text Area in Angular

Adding SVG to Component

The function __WEBPACK_IMPORTED_MODULE_3_ionic_native__.a.open is returning an error

What is the best way to attach events to buttons using typescript?

Visual Studio - Error TS1005 'Unexpected token'

Tips for resetting and enabling file uploads with ng2-file-upload

Capturing page titles accurately for timeonsite tracker in a single-page Angular app is challenging when navigating to other pages

Stringified HTML code showcased

Tips for accessing child elements within an Angular component

Is there a way to modify an image that has been dynamically inserted in an Angular application?

Discovering Typescript: Inferring the type of a union containing specific strings

What methods can be utilized to gauge loading speed in Angular2?

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps