Storing array of values from checkbox and input elements in Angular+Typescript

Question

In ref to this question https://stackoverflow.com/questions/57707339/how-to-dynamically-use-ng-for-to-get-input-boxes-and-checkbox/57707843?noredirect=1#comment101860409_57707843 . I am able to dynamically generate div elements(comprises of input element and checkbox).

I am able to retrieve the values. But my problem is: input elements must be stored along with checkboxes that are clicked. Account(input elements) have different roles associated with them. Roles are assigned based on the checkboxes checked values.

In typescript, I want to store account and its roles together. In Angular code, If I have two accounts, I am able to fetch the values of first account values and not the second value. How to I modify ngFor to fetch multiple accounts values.

Here is the code snippet and what I have tried

Angular.html

<form (ngSubmit)="SaveRecord()" #idForm="ngForm">

 <div *ngFor="let item of record.roles;let i=index">
  <label for="name">AccountId</label>
  <input type="text" class="form-control" [(ngModel)]="item.accountid" name="accountid" (change)="updateUser($event.target.value)" required> 

 <label>IT Admin</label>  
 <mat-checkbox [(ngModel)] = "item.ITrole"  id="check2" [checked]="isChecked"  name="ITcheck" (change)="checkBoxClick($event,'IT Admin')"> 
 </mat-checkbox>
 </div>

typescript.ts

  record = {firstName:null,lastName:null,emailAddress:null,accountRoles:1,roles:[{accountid:null,role:null}]};             
SaveRecord(){
   //what should I write here to get input and checkbox values and store them in array
  }

You have only one role: roles:[{accountid:null,role:null}]. You are looping through roles not accounts. — Maihan Nijat
– Maihan Nijat, Commented Aug 30, 2019 at 14:17
Thats correct , I will modify the object model to roles:[{accountid:null,role:[]}] — karansys
– karansys, Commented Aug 30, 2019 at 14:19
Before modifying. Do you want to show input for each account or for each role of the account? — Maihan Nijat
– Maihan Nijat, Commented Aug 30, 2019 at 14:20
I want to show the inputs for accounts and its associated roles ( checkboxes that are checked) — karansys
– karansys, Commented Aug 30, 2019 at 14:21

Maihan Nijat · Accepted Answer · 2019-08-30 15:06:34Z

0

I suggest to use Nested FormArrays.

The following might not be a complete answer but can help you to refactor and fulfill your needs:

Add the following to your logic:

records = [];
roles = ['Admin', 'IT'];

changeRecords(e) {
   const record = [{accountId: null, roles: [{role: 'Admin'}, {role: 'IT'}]}];
   this.records.push(record);
}

And your HTML:

<form>
  <input type="number" (change)="changeRecords($event)">
  <div *ngFor="let record of records">
    <label>Account ID</label>
    <input type="text"/>

    <div *ngFor="let role of roles">
      <label>{{role}}</label>
      <input type="checkbox"/>
    </div>
  </div>
</form>

edited Aug 30, 2019 at 15:06

answered Aug 30, 2019 at 14:32

Maihan Nijat

9,36313 gold badges69 silver badges118 bronze badges

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

Collectives™ on Stack Overflow

Storing array of values from checkbox and input elements in Angular+Typescript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related