Expanding Form Arrays with Dynamically Generated Fields

Question

Expanding Form Arrays with Dynamically Generated Fields

One challenge I'm facing involves a form array structured as follows:

    this.myForm = this.fb.group({
      arr: this.fb.array([this.createItem()])
    })

I have the ability to dynamically append fields to the array using the following methods:

    createItem() {
    return this.fb.group({
      name: [''],
      pay: [''],
      type: []
    })
  

    addItem() {
    this.arr = this.myForm.get('arr') as FormArray;
    this.arr.push(this.createItem());}

The 'type' control operates as a dropdown with the following values:
    
  types = [
    { id: 10, name: 'A' },
    { id: 20, name: 'B' },
    { id: 30, name: 'C' },
  ];

My main concern arises when a user selects Type 'A' for a group. In such cases, I aim to include two additional fields: 'phone' and 'address'. Conversely, for selections of 'B' and 'C', I do not want these extra fields added.

For instance, if a user opts for 'A' in the first entry of the form Array, I will introduce controls for 'phone' and 'address' within the 'this.fb.group'. If the user switches to 'B' or 'C' for that specific row in the array, I will remove these two fields accordingly.

To achieve this functionality, I am keen on subscribing to the changes in the 'type' form control, enabling me to add or delete controls based on the selected type. However, I am uncertain about the exact implementation steps. Reference stackblitz can be found here.

angular typescript angular-reactive-forms angular-formbuilder

Answer 1

Answer №1

To manage dynamic FormControls in Angular, you can subscribe to the valueChanges event of a FormControl and use the addControl and removeControl methods based on its value.

Here's an example code snippet to illustrate how you can achieve this:


createItem() {
  const newFormGroup = this.fb.group({
    name: [''],
    pay: [''],
    type: [],
  });
  newFormGroup.get('type').valueChanges.subscribe((value) => {  
    if (value == 10) { 
      this.addAdditionalControls(newFormGroup);
    } else {
      this.removeAdditionalControls(newFormGroup);
    }
  });
  return newFormGroup;
}

addAdditionalControls(formGroup: FormGroup) {
  formGroup.addControl('phone', new FormControl(''));
  formGroup.addControl('address', new FormControl(''));
}

removeAdditionalControls(formGroup: FormGroup) {
  if (formGroup.get('phone') && formGroup.get('address')) {
    formGroup.removeControl('phone');
    formGroup.removeControl('address');
  }
}

In your HTML file, you can conditionally display the dynamic controls like this:


<select placeholder="Type" formControlName="type">
  <option *ngFor="let type of types" [value]="type.id">
    {{ type.name }}
  </option>
</select>
<ng-container *ngIf="a.get('phone')">
  <br /><br />
  <label for="phone">Phone:</label>
  <input type="text" name="phone" formControlName="phone" />
</ng-container>
<ng-container *ngIf="a.get('address')">
  <br /><br />
  <label for="address">Address:</label>
  <input type="text" name="address" formControlName="address" />
</ng-container>

Answer 2

To manage dynamic FormControls in Angular, you can subscribe to the valueChanges event of a FormControl and use the addControl and removeControl methods based on its value.

Here's an example code snippet to illustrate how you can achieve this:


createItem() {
  const newFormGroup = this.fb.group({
    name: [''],
    pay: [''],
    type: [],
  });
  newFormGroup.get('type').valueChanges.subscribe((value) => {  
    if (value == 10) { 
      this.addAdditionalControls(newFormGroup);
    } else {
      this.removeAdditionalControls(newFormGroup);
    }
  });
  return newFormGroup;
}

addAdditionalControls(formGroup: FormGroup) {
  formGroup.addControl('phone', new FormControl(''));
  formGroup.addControl('address', new FormControl(''));
}

removeAdditionalControls(formGroup: FormGroup) {
  if (formGroup.get('phone') && formGroup.get('address')) {
    formGroup.removeControl('phone');
    formGroup.removeControl('address');
  }
}

In your HTML file, you can conditionally display the dynamic controls like this:


<select placeholder="Type" formControlName="type">
  <option *ngFor="let type of types" [value]="type.id">
    {{ type.name }}
  </option>
</select>
<ng-container *ngIf="a.get('phone')">
  <br /><br />
  <label for="phone">Phone:</label>
  <input type="text" name="phone" formControlName="phone" />
</ng-container>
<ng-container *ngIf="a.get('address')">
  <br /><br />
  <label for="address">Address:</label>
  <input type="text" name="address" formControlName="address" />
</ng-container>

Answer 3

Answer №2

To optimize your FormArray, consider using an array of FormGroups with the same structure but only display inputs when the type is "A". In the HTML file, you can achieve this by adding:

*ngIf="myForm.get('arr.'+i+'.type').value!='A'

-where "i" represents the index being iterated in the formArray-. If you require validation, implement a custom validator within the group:

createItem() {
    return this.fb.group(
      {
        name: [''],
        pay: [''],
        type: [],
      },
      { validator: this.requiredIfType() }
    );
  }
  requiredIfType() {
    return (control: AbstractControl) => {
      const group = control as FormGroup;
      if (control.get('type').value != 10) return null;
      let error = null;
      if (!control.get('name').value) error = { nameRequired: true };
      if (!control.get('pay').value) error = { ...error, payRequired: true };

      return error;
    };
  }

You can then utilize the following code:

    <div class="error" *ngIf="myForm.get('arr.' + i + '.name').touched &&
                  myForm.get('arr.' + i).errors?.nameRequired">
      Name required
    </div>

    <div class="error" *ngIf="myForm.get('arr.' + i + '.pay').touched &&
                  myForm.get('arr.' + i).errors?.payRequired">
      Payment required
    </div>

For further reference, please visit this stackblitz link.

Answer 4

To optimize your FormArray, consider using an array of FormGroups with the same structure but only display inputs when the type is "A". In the HTML file, you can achieve this by adding:

*ngIf="myForm.get('arr.'+i+'.type').value!='A'

-where "i" represents the index being iterated in the formArray-. If you require validation, implement a custom validator within the group:

createItem() {
    return this.fb.group(
      {
        name: [''],
        pay: [''],
        type: [],
      },
      { validator: this.requiredIfType() }
    );
  }
  requiredIfType() {
    return (control: AbstractControl) => {
      const group = control as FormGroup;
      if (control.get('type').value != 10) return null;
      let error = null;
      if (!control.get('name').value) error = { nameRequired: true };
      if (!control.get('pay').value) error = { ...error, payRequired: true };

      return error;
    };
  }

You can then utilize the following code:

    <div class="error" *ngIf="myForm.get('arr.' + i + '.name').touched &&
                  myForm.get('arr.' + i).errors?.nameRequired">
      Name required
    </div>

    <div class="error" *ngIf="myForm.get('arr.' + i + '.pay').touched &&
                  myForm.get('arr.' + i).errors?.payRequired">
      Payment required
    </div>

For further reference, please visit this stackblitz link.

Expanding Form Arrays with Dynamically Generated Fields

Answer №1

Answer №2

Similar questions

Having difficulties utilizing React Syntax Highlighter in Next.js 13 with Sanity version 3

Struggling to access component variables within the setTimeout function

Strategies for incorporating 'this' into a versatile method function

Creating a specialized Angular validator that detects null values and returns the associated FormControl

When utilizing a combination of generics in a Typescript mapped type, the resulting property type is not computed

Explore the titles provided by Wikipedia

Utilize mapping for discriminated union type narrowing instead of switch statements

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

What sets apart angular-cli from @angular/cli in the npm ecosystem?

Guide on transforming a JSON string into an array of custom objects using the json2typescript NPM module within a TypeScript environment

Error encountered in app.module.ts file of Angular 2 application

Generating a dynamic table using Angular

Use rowSelected to set the initial selected rows in an Angular Kendo UI grid

Is Resharper suitable for analyzing Angular code?

The integration of AngularFireFunctions with Ionic 5 Angular breaks down when attempting to create a production build using the --prod flag

Error in Typescript: Array containing numbers is missing index property `0`

Is it possible to transform a personalized typescript component into an HTMLElement within the Angular framework?

Issue: The token is required in Angular 2 RC5 to proceed with the testing

Nesting objects within arrays using Typescript Generics

Tips for ensuring an angular mat panel always remains expanded: