Connect values with formBuilder in Angular

Question

Connect values with formBuilder in Angular

I have an array of objects structured like this

const premises = [
  {
    question: '1',
    value: '1'
  },
  {
    question: '2',
    value: '2'
  },
  {
    question: '3',
    value: '3'
  }
];

I am looking to generate form controls dynamically based on the data, similar to this

this.formBuilder.group({
  1: [{ value: 1 }, [Validators.min(0), Validators.max(100), Validators.required]],
  2: [{ value: 2 }, [Validators.min(0), Validators.max(100), Validators.required]],
  3: [{ value: 3 }, [Validators.min(0), Validators.max(100), Validators.required]]
});

This is just a simplified example, there could be more values in the premises array.

I attempted something along these lines


this.formBuilder.group({
  premises.forEach((x) => {
    x.question: [{ value: x.value }, [Validators.min(0), Validators.max(100), Validators.required]]
  });
});

However, I haven't been successful in creating dynamic controls and values.

angular typescript angular-reactive-forms

Answer 1

Answer №1

The ForEach loop does not allow you to return anything, resulting in undefined as the default output. Therefore, using forEach will be ineffective. Instead, consider utilizing Array.reduce to generate a dynamic formControl object similar to the example below:

Give this a try:

let group = premises.reduce((acc, x) => {
   acc[x.question] = this.fb.control({ value: x.value, disabled: false }, [
    Validators.min(0),
    Validators.max(100),
    Validators.required,
  ]);
  return acc;
}, {});

this.formBuilder.group({
  ...group,
});

Alternatively,

Utilize a for loop to create a dynamic object:

let fGroup = {};
for (let i = 0; i < premises.length; i++) {
  fGroup[premises[i].question] = this.fb.control(
    { value: premises[i].value, disabled: false },
    [Validators.min(0), Validators.max(100), Validators.required]
  );
}

 this.formBuilder.group({
  ...fGroup,
});

Answer 2

The ForEach loop does not allow you to return anything, resulting in undefined as the default output. Therefore, using forEach will be ineffective. Instead, consider utilizing Array.reduce to generate a dynamic formControl object similar to the example below:

Give this a try:

let group = premises.reduce((acc, x) => {
   acc[x.question] = this.fb.control({ value: x.value, disabled: false }, [
    Validators.min(0),
    Validators.max(100),
    Validators.required,
  ]);
  return acc;
}, {});

this.formBuilder.group({
  ...group,
});

Alternatively,

Utilize a for loop to create a dynamic object:

let fGroup = {};
for (let i = 0; i < premises.length; i++) {
  fGroup[premises[i].question] = this.fb.control(
    { value: premises[i].value, disabled: false },
    [Validators.min(0), Validators.max(100), Validators.required]
  );
}

 this.formBuilder.group({
  ...fGroup,
});

Answer 3

Answer №2

To tackle this issue effectively, I recommend setting up a form array. Since "Premises" is an array, utilizing a FormArray along with handy functions like push can greatly benefit the organization of such data.

const premises = [
      { question: '1', value: '1' },
      { question: '2', value: '2' },
      { question: '3', value: '3' }
    ];

this.formBuilder.group({
  premises: this.formBuilder.array(
    this.premises.map(premise => 
      this.formBuilder.group({ 
        value: [premise.value, [Validators.min(0), Validators.max(100), Validators.required]]
    })
 )
)

Answer 4

To tackle this issue effectively, I recommend setting up a form array. Since "Premises" is an array, utilizing a FormArray along with handy functions like push can greatly benefit the organization of such data.

const premises = [
      { question: '1', value: '1' },
      { question: '2', value: '2' },
      { question: '3', value: '3' }
    ];

this.formBuilder.group({
  premises: this.formBuilder.array(
    this.premises.map(premise => 
      this.formBuilder.group({ 
        value: [premise.value, [Validators.min(0), Validators.max(100), Validators.required]]
    })
 )
)

Connect values with formBuilder in Angular

Answer №1

Answer №2

Similar questions

Angular 5 does not allow function calls within decorators

Encountering errors when subscribing to a BehaviorSubject in Angular 8

What's the reason Ionic is not refreshing my list after I remove items using the search bar?

The sticky navbar fails to stay in place when the content becomes too lengthy

Unable to expand the dropdown button collection due to the btn-group being open

Listening for value changes on a reactive form seems to be a challenge for me

The module 'json-stringify-safe' could not be located

What is the solution for the warning "Solid's reactivity is broken when destructuring component props"?

The Tauri JS API dialog and notification components are failing to function, resulting in a null return value

The edited input is not being shown on the console when using the PUT method

Differences between Typescript React.ReactElement and JSX.Element

Restrict the scope of 'unknown' to an object containing only a string-field without resorting to 'any'

Error in Visual Studio: ASP.NET Core application integrated with Angular is unable to run the API

What is the best way to disconnect an ngFor loop from its original context and reconnect it to a wrapping component's context when utilized as projected content?

Could you confirm if this is a TypeScript function?

Object.assign versus the assignment operator (i.e. =) when working with React components

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

What is the proper way to implement 'page-break-before or after' in a PrimeNG table?

Using 'cy.get' to locate elements in Cypress tutorial

Encountering multiple error messages from Protractor @types