Angular FormArray not detecting inputs for formcontrols of last element

Question

trying to create a formarray of multiple formgroups, the issue I am facing is kind of strange, the formcontrols present in last element of formarray , is not taking input values

add-modules.ts file

import { ChangeDetectorRef, Component } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

/** @title Basic drawer */
@Component({
  selector: 'app-module-new',
  templateUrl: 'app-module-new.html',
  styleUrls: ['app-module-new.css'],
})
export class AppModuleNewComponent {
  moduleForm: FormGroup;

  constructor(private changeDetectorRef: ChangeDetectorRef) {
    this.moduleForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      description: new FormControl('', [Validators.required]),
      lessons: new FormArray([
        new FormGroup({
          type: new FormControl('lesson'),
          name: new FormControl('', [Validators.required]),
          description: new FormControl(''),
        }),
      ]),
    });
  }
  ngAfterViewChecked(): void {
    this.changeDetectorRef.detectChanges();
  }
  private newLesson() {
    return new FormGroup({
      type: new FormControl('lesson'),
      name: new FormControl('', [Validators.required]),
      description: new FormControl(''),
    });
  }

  addLesson() {
    (this.moduleForm.get('lessons') as FormArray).controls.push(
      this.newLesson()
    );
  }
  getLessonsControl() {
    return (this.moduleForm.get('lessons') as FormArray).controls;
  }

  submitForm() {
    console.log(this.moduleForm);
  }
}

add-module.html

 <div class="container text-grey" style="width: 80%; margin: 0 auto">
  <h1>HELLo</h1>

  <form [formGroup]="moduleForm" (submit)="submitForm()">
    <div>
      <label>Input</label>
      <input type="text" formControlName="name" />
    </div>

    <div>
      <label>Desc</label>
      <input type="text" formControlName="description" />
    </div>

    <div
      formArrayName="lessons"
      *ngFor="let line of getLessonsControl();let i=index "
    >
      Lesson {{i+1}}
      <div [formGroupName]="i">
        <div>
          <label>Name</label>
          <input type="text" formControlName="name" />
        </div>
        <div>
          <label>desc</label>
          <input type="text" formControlName="description" />
        </div>
      </div>
    </div>
    <button type="button" (click)="addLesson()">Add Lesson</button>
    <button type="submit">SUBMIT</button>
  </form>
</div>

so, when I filled inputs of last element of form array, inputs I filled vs the output I get

stackblitz link- https://stackblitz.com/edit/angular-formarray-last-element-bug?file=main.ts

stackblitz.com/edit/… check the issue in app-module-new file,click on submit, and look into logged values,changes for last index are not getting reflected — Ash Pardhi
– Ash Pardhi, Commented Jun 12, 2023 at 18:04

Prashant Singh · Accepted Answer · 2023-06-12 18:57:31Z

1

Update the code of you addLesson as follows, instead of pushing the values to controls push directly to formArray.

  addLesson() {
    (this.moduleForm.get('lessons') as FormArray).push(this.newLesson());
  }

answered Jun 12, 2023 at 18:57

Prashant Singh

6911 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular FormArray not detecting inputs for formcontrols of last element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related