Is there a way for me to confirm the presence of a particular object within an array and return a true value

Question

Is there a way for me to confirm the presence of a particular object within an array and return a true value

I am working on a form in Angular that includes checkboxes. I want to automatically check the checkbox if the user has a specific role.

Here is my current approach:

<form [formGroup]="rolesForm">
  <label 
    formArrayName="roles" 
    *ngFor="let role of rolesForm.controls['roles'].controls; let i = index"
  >
    <input 
      type="checkbox" 
      [checked]="checkIfTrue(role[i])"
      [formControlName]="i" 
    /> {{role[i].name}}
  </label>
</form>

This is part of the component:

roles: Role[] = [
  {
    uid: '456DNC',
    name: 'Admin'
  },
  {
    uid: '546DKZ',
    name: 'Member'
  },
  {
    uid: '741JXY',
    name: 'Guest'
  }
]

user: User = {
  uid: '123ABC',
  name: 'Steve',
  roles: [
    {
      uid: '456DNC',
      name: 'Admin'
    }
  ]
}

rolesForm: FormGroup;

ngOnChanges() {
  const formControls = this.roles.map(role => new FormControl(false));

  this.rolesForm = this.formBuilder.group({
    roles: new FormArray(formControls)
  });
}

checkIfTrue(role: Role) {
  return this.user.roles.find(role);
}

An error message I'm encountering is:

[object Object] is not a function at Array.find

In trying to resolve the issue, I experimented with using .indexOf() and .includes()

arrays angular typescript

Answer 1

Answer №1

To ensure the proper functioning of the reactive form, it is recommended to set the value when constructing the form rather than relying on the [checked] property.

Visit this link for an example.

ngOnChanges() {
  const formControls = this.roles.map(role => new FormControl(this.checkIfTrue(role)));

  this.rolesForm = this.formBuilder.group({
    roles: new FormArray(formControls)
  });
}

checkIfTrue(role) {
  return this.user.roles.find(r => r.uid === role.uid);
}

<form [formGroup]="rolesForm">
  <label 
    formArrayName="roles" 
    *ngFor="let role of rolesForm.controls['roles'].controls; let i = index"
  >
    <input 
      type="checkbox" 
      [formControlName]="i" 
    /> {{roles[i].name}}
  </label>
</form>

Answer 2

To ensure the proper functioning of the reactive form, it is recommended to set the value when constructing the form rather than relying on the [checked] property.

Visit this link for an example.

ngOnChanges() {
  const formControls = this.roles.map(role => new FormControl(this.checkIfTrue(role)));

  this.rolesForm = this.formBuilder.group({
    roles: new FormArray(formControls)
  });
}

checkIfTrue(role) {
  return this.user.roles.find(r => r.uid === role.uid);
}

<form [formGroup]="rolesForm">
  <label 
    formArrayName="roles" 
    *ngFor="let role of rolesForm.controls['roles'].controls; let i = index"
  >
    <input 
      type="checkbox" 
      [formControlName]="i" 
    /> {{roles[i].name}}
  </label>
</form>

Answer 3

Answer №2

When the indexOf() method does not find any elements, it returns -1. To handle this situation, you can use the following implementation:

return this.user.roles.indexOf(role) != -1

With this approach, the code will return true if the element is found using indexOf, and false if it is not.

You can include this logic in your checkIfTrue(role: Role) method

Answer 4

When the indexOf() method does not find any elements, it returns -1. To handle this situation, you can use the following implementation:

return this.user.roles.indexOf(role) != -1

With this approach, the code will return true if the element is found using indexOf, and false if it is not.

You can include this logic in your checkIfTrue(role: Role) method

Answer 5

Answer №3

Nothing to worry about, just make this slight modification:

 validateRole(role: Role) {

   this.user.roles.find(element=>{
    if(element.name === role) {
       return true;
     }
     });
   }

Answer 6

Nothing to worry about, just make this slight modification:

 validateRole(role: Role) {

   this.user.roles.find(element=>{
    if(element.name === role) {
       return true;
     }
     });
   }

Is there a way for me to confirm the presence of a particular object within an array and return a true value

Answer №1

Answer №2

Answer №3

Similar questions

The angular2-markdown module encounters errors

Issue with Material UI v5: "spacing" property not found on custom theme object

Iterating through a for loop in Angular2 to send multiple GET requests to a Django backend

How can I integrate React-Router Link as a component within Material-UI using Typescript?

The Angular2 app and NodeJs in the Docker container are unresponsive

REDUX: The dispatch function is failing to update the store

Tips for creating an array in a <script> tag within an hbs view template

React/TypeScript - react-grid-layout: The onDrag event is fired upon clicking the <div> element

JavaScript - Issue with retrieving object properties accurately

Chunk loading in IE 11 has encountered an error

How to bring in images from the assets folder using React and Typescript

Heroku build is reporting that it cannot locate the `@types` in the package.json file

There seems to be an issue with loading fonts properly in the combination of Webpack and

Configuring ESLint, Prettier, and TypeScript in React Native: A Step-by-Step Guide

Is it possible for a node and @angular/cli based application to function without an internet connection?

How can I populate dropdown options from an API in a react JS project using typescript and react saga?

The guidelines for implementing pipes in Angular 2

What causes a function loss when using the spread operator on window.localStorage?

Ionic 5 page div within ion-contents element is experiencing scrolling issues on iPhone devices

Expand the HTTP Response interface with Typescript