CODEWITHSUNDEEP
angulartypescript
dm-am
dm-am

Reputation: 57

How to store all checkboxes from the form when submitting?

I have a list of checkboxes representing the profiles I want to save in db.

HML:

    <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>

Then in the typescript I want to iterate the list os profiles and call the create profile service for the ones checked. The service receives a single profile so i want to itare and check if the check box is checked and then I can call the Spring boot service.

How can I do that?

TYPESCRIPT.TS

    //Please suggest the code

//The service
this.profileService.createProfile(profile)

Upvotes: 2

Views: 112

Answers (3)

Raj
Raj

Reputation: 415

add Id to input checkboxes something like this

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

profileData:any=[];

  ngOnInit() {
    this.getProfiles();
    }

 getProfiles() {
    this.profileService.getPerfisList()
      .subscribe(res=> {
        if (res) {
          this.profilesservice= res;
          this.profileData = this.profilesservice;
         }
      })
  }

 submit() 
  {

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

      }
  }

This will solve your issues.

Upvotes: 1

noggin182
noggin182

Reputation: 637

Are you trying to edit the profile? If so you need to change ng-model='profile.checked' to [(ng-model)]='profile.checked'. The syntax you have used won't create a binding

Upvotes: 0

dm-am
dm-am

Reputation: 57

I will paste the entire code here to avoid confusion:

HTML:

<h3>Criar 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>Perfis</h4>
        <table class="table table-striped">
         <thead>
           <tr>
             <td>Habilitar/Desabilitar</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();
  }




}

Upvotes: 0

Related Questions