Using Angular to create a dynamic form with looping inputs that reactively responds to user

Question

Using Angular to create a dynamic form with looping inputs that reactively responds to user

I need to implement reactive form validation for a form that has dynamic inputs created through looping data:

This is what my form builder setup would be like :

constructor(private formBuilder: FormBuilder) { 
    this.userForm = this.formBuilder.group({
      'inputOne': ['', [Validators.required]],
      'inputTwo': ['', [Validators.required]],
       ...
      'inputN': ['', [Validators.required]]
    });
  }

And this is how my template structure would look like :

<form [formGroup]="userForm">
  <div class="form-group" *ngFor="let item of items; let i=index;">
        <label for="lastName">{{item.name}}</label>
        <input class="form-control" name="lastName" id="lastName" type="text" [formControlName]="item.name">
      </div>
</form>

The items are fetched dynamically from the backend

Question: How can I populate controls dynamically in Angular reactive forms?

javascript angular typescript angular-reactive-forms angular-forms

Answer 1

Answer №1

It seems like a form array would be more suitable in this scenario, rather than a group...

  constructor(private formBuilder: FormBuilder) { 
    // Initialize an empty form array
    this.userForm = this.formBuilder.array([]); 
  }

  // Use this method whenever you want to add an item to the array
  private addItem(item) {
    // Create a control with specified validators and values
    const fc = this.formBuilder.control(i.lastName, [Validators.required]);
    this.userForm.push(fc); // Add the control to the form array
  }

  // Call this function whenever you need to reset the form array
  private resetFormArray(items) {
    this.userForm.clear(); // Clear the existing array
    items.forEach(i => this.addItem(i)); // Add the new items
  }

<form [formGroup]="userForm">
  <div class="form-group" *ngFor="let item of items; let i=index;">
    <label for="lastName">{{item.name}}</label>
    <input class="form-control" name="lastName" id="lastName" type="text" [formControlName]="i">
  </div>
</form>

Please note that the index is being used as the form control name in this implementation

Answer 2

It seems like a form array would be more suitable in this scenario, rather than a group...

  constructor(private formBuilder: FormBuilder) { 
    // Initialize an empty form array
    this.userForm = this.formBuilder.array([]); 
  }

  // Use this method whenever you want to add an item to the array
  private addItem(item) {
    // Create a control with specified validators and values
    const fc = this.formBuilder.control(i.lastName, [Validators.required]);
    this.userForm.push(fc); // Add the control to the form array
  }

  // Call this function whenever you need to reset the form array
  private resetFormArray(items) {
    this.userForm.clear(); // Clear the existing array
    items.forEach(i => this.addItem(i)); // Add the new items
  }

<form [formGroup]="userForm">
  <div class="form-group" *ngFor="let item of items; let i=index;">
    <label for="lastName">{{item.name}}</label>
    <input class="form-control" name="lastName" id="lastName" type="text" [formControlName]="i">
  </div>
</form>

Please note that the index is being used as the form control name in this implementation

Using Angular to create a dynamic form with looping inputs that reactively responds to user

Answer №1

Similar questions

Strategies for effectively searching and filtering nested arrays

Combining AngularJS, D3, and JQuery on a single webpage can pose challenges, specifically with D3's ability to accurately read DOM dimensions

Is there a way for me to understand the connection between `FormsModule` and `ngModel`?

What are some strategies for safeguarding a disabled button?

Using the val() function on a select element can occasionally result in a null value

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Is there a way to make a <div> load automatically when the page starts loading?

Unlocking the potential of input values in Angular.jsDiscovering the secret to

Having trouble adding flexslider before a div element with jQuery

The kendo-angular-chart is missing the required dependency kendo-charts-1.19.1.tgz

Jquery adds a fun, wobbly effect to animations

Animating an image inside a bordered div

Is there a way to automatically refresh random data from the server to the web client without the need for manual browser refresh?

What is the mechanism by which Redux sends state to mapStateToProps?

Is it possible to iterate through an object with multiple parameters in Op.op sequelize?

Prevent unexpected page breaks in <tr> elements on Firefox (Could JavaScript be the solution?)

React is currently in the process of downloading images that were not fetched during

What is the best way to recreate WordPress categories using static HTML pages?

What is the method for transferring form data to a different page?