Angular 14 form not binding data in dynamic form

Question

I am trying to create a dynamic form to add actors to games in my angular website, but when I load in the page I get the following errors:

The second error happens on all input fields for the dynamic form part.

export class GameAddComponent implements OnInit {
  form: FormGroup;

  constructor(
    private gameService: GameService,
    private formBuilder: FormBuilder,
    private router: Router
  ) {
    this.form = this.formBuilder.group({
      name: '',
      description: '',
      price: '',
      category: '',
      image: '',
      releaseDate: '',
      actors: this.formBuilder.array([
        this.formBuilder.control({
          name: '',
          isMale: '',
          birthDay: '',
        })
      ]),
    });
  }

  get actors() {
    return this.form.get('actors') as FormArray;
  }

  onSubmit(): void {
    const values: Partial<Game> = {
      ...this.form.value,
    };
    console.log(this.form.value);
    this.gameService.addGame(values).subscribe();
    this.router.navigateByUrl('/games');
  }

  addField() {
    this.actors.push(this.formBuilder.control);
  }

  ngOnInit(): void {}
}

<div class="container px-5 my-5">
  <form id="contactForm" [formGroup]="form" (ngSubmit)="onSubmit()">
    
    <!--normal working input here-->

    <!--below is the dynamic form-->
    <i class="nav-icon bi bi-plus-circle-fill px-5" (click)="addField()"></i>

    <div *ngFor="let actor of actors.controls">
      <h2>Acteur</h2>
      <div class="form-floating mb-1">
        <div class="form-floating py-2">
          <input
            class="form-control"
            id="naam"
            type="text"
            placeholder="Naam"
            formControlName="name"
          />
          <label class="form-labels" for="name">Naam</label>
        </div>

        <div class="form-floating py-2">
          <select
            class="form-select"
            aria-label="Default select example"
            formControlName="isMale"
          >
            <option value="0">Vrouw</option>
            <option value="1">Man</option>
          </select>
          <label class="form-labels" for="name">Geslacht</label>
        </div>

        <div class="pb-3">
          <label for="birthDay" class="px-2">GeboorteDatum:</label>
          <input type="date" id="birthDay" formControlName="birthDay" />
        </div>
      </div>
    </div>

    <div class="d-grid">
      <button class="btn btn-primary btn-lg" id="submitButton" type="submit">
        Aanmaken
      </button>
    </div>
  </form>
</div>

When I submit the form, the data from the dynamic part is not saved, so I'd guess it's because it can't find the properties in the formbuilder

Any help would be greatly appreciated!

score 1 · Accepted Answer · answered Dec 07 '22 at 16:07

1

I followed the following tutorial and got my application working, https://www.tektutorialshub.com/angular/nested-formarray-example-add-form-fields-dynamically/

answered Dec 07 '22 at 16:07

luca.04

29
7

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 11 '22 at 12:31

score 0 · Answer 2 · answered Dec 07 '22 at 13:13

You created a single control here, which holds an object with 3 properties

this.formBuilder.control({
          name: '',
          isMale: '',
          birthDay: '',
        })

But your template tries to access those properties as formcontrols

<input
            class="form-control"
            id="naam"
            type="text"
            placeholder="Naam"
            formControlName="name"
          />
<select
            class="form-select"
            aria-label="Default select example"
            formControlName="isMale"
          >
<div class="pb-3">
          <label for="birthDay" class="px-2">GeboorteDatum:</label>
          <input type="date" id="birthDay" formControlName="birthDay" />
        </div>

--> I believe you actually want another FormGroup here

this.formBuilder.group({
          name: '',
          isMale: '',
          birthDay: '',
        })

How would I access this from the HTML, I have tried changing it to `formGroupName="actors"` or `formGroupName="name"` but it doesn't seem to work — luca.04, Dec 07 '22 at 13:29
I get the following error when trying to add [formGroup]. Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 2 more — luca.04, Dec 07 '22 at 13:36

Angular 14 form not binding data in dynamic form

2 Answers2