Utilizing Angular 4: Incorporating an array of strings into checkboxes within reactive forms

Question

Utilizing Angular 4: Incorporating an array of strings into checkboxes within reactive forms

I am trying to display checkboxes for my user roles:

For example, I have two user roles: 1. Admin 2. Employee

I have an array of roles in the userObject:

user={
        "name":"Bhushan",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7edf0f6ede4ebc5fce4edeaabe6eae8">[email protected]</a>",
        "roles":['Admin','Employee']
    }

I want to use a reactive form to populate this model into a form. I want to populate the roles array into read-only checkboxes i.e. when the form loads, the user can edit the name & email but checkboxes will show 'admin' toggled if the user has an admin role or untoggled if he is not an admin. The same can be said for the employee role.

So far I have tried the following:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
        <div style="margin-bottom: 1em">
            <button type="submit" [disabled]="userForm.pristine" class="btn btn-success">Save</button> &nbsp;
            <button type="reset" (click)="revert()" [disabled]="userForm.pristine" class="btn btn-danger">Revert</button>
        </div>
        <div class="form-group">
            <label class="center-block">Name:
                <input class="form-control" formControlName="name">
                </label>
        </div>
        <div class="form-group">
            <label class="center-block">Email:
                <input class="form-control" formControlName="email">
                </label>
            </div>
            <div class="form-group" *ngFor="let role of roles;let i=index">
                <label>
                    // I tried this, but it doesn't work
                    <!--<input type="checkbox" [name]="role" [(ngModel)]="role">-->
                        {{role}}
                </label>
            </div>
    </form>

    <p>userForm value: {{ userForm.value | json}}</p>

Any suggestions?

javascript angular typescript checkbox angular-reactive-forms

Answer 1

Answer №1

To implement this functionality, consider constructing a form with the roles stored in an array:

this.userDataForm = this.fb.group({
  name: [this.user.name],
  roles: this.fb.array(this.user.roles || [])
});

// Optionally, assign controls to variables for easy reference
this.nameControl = this.userDataForm.controls.name;
this.rolesControl = this.userDataForm.controls.roles.controls;

The template's roles array could be defined as follows:

roles = ['Admin', 'Employee','Some role 1', 'Some role 2']

In the iteration within the template, compare each role from the roles array to the corresponding value in the form array to check and set its status accordingly. Ensure to use the safe navigation operator to prevent errors when accessing non-existent indexes:

<div class="form-group" *ngFor="let role of roles; let i=index">
  <input [checked]="role == rolesControl[i]?.value" 
     [disabled]="true" type="checkbox">{{ role }}
</div>

See Demo

Answer 2

To implement this functionality, consider constructing a form with the roles stored in an array:

this.userDataForm = this.fb.group({
  name: [this.user.name],
  roles: this.fb.array(this.user.roles || [])
});

// Optionally, assign controls to variables for easy reference
this.nameControl = this.userDataForm.controls.name;
this.rolesControl = this.userDataForm.controls.roles.controls;

The template's roles array could be defined as follows:

roles = ['Admin', 'Employee','Some role 1', 'Some role 2']

In the iteration within the template, compare each role from the roles array to the corresponding value in the form array to check and set its status accordingly. Ensure to use the safe navigation operator to prevent errors when accessing non-existent indexes:

<div class="form-group" *ngFor="let role of roles; let i=index">
  <input [checked]="role == rolesControl[i]?.value" 
     [disabled]="true" type="checkbox">{{ role }}
</div>

See Demo

Utilizing Angular 4: Incorporating an array of strings into checkboxes within reactive forms

Answer №1

Similar questions

validation of dialog forms

Tips for preventing the repetition of values when dynamically adding multiple values to a text box using JavaScript

What is the process for generating the string HttpContext.GetGlobalResourceObject("languagetext","PersonalReportFrench") using C#?

Leveraging an array with a switch() function in JavaScript

Creating circular patterns with looping on a canvas

Increasing the size of elements with jQuery animate method

What methods does JUMflot use to update points or select items? Interested in adding objects to an array and redrawing them without altering the original item

Creating custom errors in Node.js is a powerful tool that can enhance the robustness and functionality of your applications. One common

Setting a default action for an Ext.Ajax.request error situation

Determining the value of an element by examining the clicked element

Show a modal confirmation box in a JsonResult response from the controller based on a specific condition

Utilizing Template Literals within Typescript

Personalized program name appears when CTRL key is pressed

Subtracted TypeScript concept

What is the process for integrating TypeScript into my current Vite (React) project?

Invoke the function once the database information has been retrieved

Preventing Vue.js from triggering watch on initial load

What is the best way to dynamically retrieve the field name from a JSON object using JavaScript?

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

Upon updating my application from Angular 14 to 16, I encountered an overwhelming number of errors within the npm packages I had incorporated