Reactive form within a parent object for nested counting

Question

Reactive form within a parent object for nested counting

I am looking to generate a nested form based on the following data:

The current data available is as follows:

mainObject = {
  adminname: 'Saqib',
  adminemail: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40252d21292c002538212d302c256e232f2d">[email protected]</a>',
  users: [
    { user_type: 'Adult', count: 3 },
    { user_type: 'Child', count: 1 },
    { user_type: 'Infant', count: 0 },
  ],
};

I aim to display nested forms for the counts mentioned in the Users Array. For instance, there should be 3 adult forms, 1 child form, and no Infant form as the Infant count is 0. These counts are flexible and can be adjusted, such as having 0 child forms and 1 infant form.

.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Enter Admin Name" />
  <br />
  <input formControlName="admin_email" placeholder="Enter Admin Email" />

  <div formArrayName="users"gt;
    <div *ngFor="let pro of myForm.get('users').controls; let i = index">
      <br />
      <div [formGroupName]="i" style="border: 1px solid; padding: 10px">
        <div>User Type: {{ pro.value.user_type }}</div>
        User Name:<br />
        <input type="text" formControlName="user_name" /> <br />

        Email:<br />
        <input type="text" formControlName="user_email" />
      </div>
    </div>
  </div>
  
  <p>
    <button type="submit">Submit</button>
  </p>
</form>

.ts

myForm: FormGroup;

  mainObject = {
    adminname: 'Saqib',
    adminemail: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99c94989095b99c81989489959cd79a9694">[email protected]</a>',
    users: [
      { user_type: 'Adult', count: 3 },
      { user_type: 'Child', count: 1 },
      { user_type: 'Infant', count: 0 },
    ],
  };
  // Generating forms based on user counts and types mentioned in the data.

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formInit();
  }

  formInit() {
    this.myForm = this.fb.group({
      name: '',
      admin_email: '',
      users: this.fb.array(
        this.mainObject.users.map((e) => this.newUsers(e.user_type, e.count))
      ),
    });
  }

  get users(): FormArray {
    return this.myForm.get('users') as FormArray;
  }

  newUsers(t, c): FormGroup {
    console.log(t, c);
    return this.fb.group({
      user_type: t,
      user_name: '',
      user_email: '',
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }

For a clearer understanding, I have created an example on Stackblitz:

Example Stackblitz

javascript angular typescript forms angular-reactive-forms

Answer 1

Answer №1

It is possible to implement the following concept:

Approach:

Start by creating a dictionary where keys are grouped by user_type and values are arrays with object(s) based on the count.
Extract the values from the first result, flatten the nested array, and add the objects to a new array.

toFormUsers(users: any[]): any[] {
  // Create array by user_type   
  let userTypeGroup = users.reduce((accumulator, current) => {
    accumulator[current.user_type] = accumulator[current.user_type] || [];

    for (let i = 0; i < current.count; i++)
      accumulator[current.user_type].push({ user_type: current.user_type });

    return accumulator;
  }, {});

   // Flatten array of arrays for userTypeGroup
  return [].concat(
    ...Object.keys(userTypeGroup).map((x) => userTypeGroup[x])
  );
}

Update your FormGroup to incorporate the method by passing mainObject.users.

this.myForm = this.fb.group({
  name: '',
  admin_email: '',
  users: this.fb.array(
    this.toFormUsers(this.mainObject.users).map((e) => this.newUsers(e.user_type, e.count))
  ),
});

View a Sample Demo on StackBlitz

Answer 2

It is possible to implement the following concept:

Approach:

Start by creating a dictionary where keys are grouped by user_type and values are arrays with object(s) based on the count.
Extract the values from the first result, flatten the nested array, and add the objects to a new array.

toFormUsers(users: any[]): any[] {
  // Create array by user_type   
  let userTypeGroup = users.reduce((accumulator, current) => {
    accumulator[current.user_type] = accumulator[current.user_type] || [];

    for (let i = 0; i < current.count; i++)
      accumulator[current.user_type].push({ user_type: current.user_type });

    return accumulator;
  }, {});

   // Flatten array of arrays for userTypeGroup
  return [].concat(
    ...Object.keys(userTypeGroup).map((x) => userTypeGroup[x])
  );
}

Update your FormGroup to incorporate the method by passing mainObject.users.

this.myForm = this.fb.group({
  name: '',
  admin_email: '',
  users: this.fb.array(
    this.toFormUsers(this.mainObject.users).map((e) => this.newUsers(e.user_type, e.count))
  ),
});

View a Sample Demo on StackBlitz

Answer 3

Answer №2

To generate a nested array of counts within the users array sourced from the mainObject:

.ts

ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.myForm = this.fb.group({
      name: '',
      admin_email: '',
      users: this.fb.array([]),
    });

    this.mainObject.users.map((element) => {
      if (element.count > 0) {
        for (let i = 0; i < element.count; i++) {
          this.addUser(element.user_type);
        }
      }
    });
  }

  addUser(type) {
    const userArray = <FormArray>this.myForm.controls['users'];
    const newUser = this.createUser(type);
    userArray.push(newUser);
  }

  createUser(type) {
    return this.fb.group({
      user_type: type,
      user_name: '',
      user_email: '',
    });
  }

  get users(): FormArray {
    return this.myForm.get('users') as FormArray;
  }

  newUsers(type, count): FormGroup {
    console.log(type, count);
    return this.fb.group({
      user_type: type,
      user_name: '',
      user_email: '',
    });
  }

Answer 4

To generate a nested array of counts within the users array sourced from the mainObject:

.ts

ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.myForm = this.fb.group({
      name: '',
      admin_email: '',
      users: this.fb.array([]),
    });

    this.mainObject.users.map((element) => {
      if (element.count > 0) {
        for (let i = 0; i < element.count; i++) {
          this.addUser(element.user_type);
        }
      }
    });
  }

  addUser(type) {
    const userArray = <FormArray>this.myForm.controls['users'];
    const newUser = this.createUser(type);
    userArray.push(newUser);
  }

  createUser(type) {
    return this.fb.group({
      user_type: type,
      user_name: '',
      user_email: '',
    });
  }

  get users(): FormArray {
    return this.myForm.get('users') as FormArray;
  }

  newUsers(type, count): FormGroup {
    console.log(type, count);
    return this.fb.group({
      user_type: type,
      user_name: '',
      user_email: '',
    });
  }

Reactive form within a parent object for nested counting

Answer №1

Answer №2

Similar questions

What is the best way to incorporate a progress bar animation into my notification?

Preserve the previous and current state within a React application

The attribute 'id' cannot be found in the class 'Foods'

The type 'xxxx' is not compatible with the parameter type 'JSXElementConstructor<never>'

Type of Angular Service Issue: string or null

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?

Troubleshooting issues with Bootstrap's responsiveness configuration

How can I access an InputStream from a local XML file in a PhoneGap application?

Increasing the value of a food topping element within a v-for list of toppings when clicking on the "+ add" button in Vue

The Angular 2 rollup AoT compilation results in a larger build size compared to the standard JiT build

offspring of offspring in jquery animation remains stationary

The functionality of jQuery Validation is not working properly once the form has been loaded using an AJAX request

jquery is showing up in the browserify bundle.js file, however, it is not functioning properly

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

Stop users from submitting empty forms

Having trouble retrieving a customized header from the HTTP response

Sending a Boolean value from a child component to its parent state in React JS

Should we store $(this) in jQuery's cache, or leave it be?

Conceal the PayPal Button

Javascript retrieve the style of an element in every possible state