Groups of FormControls can be created using Formgroups and Form

Question

Groups of FormControls can be created using Formgroups and Form

After receiving data from an API, I aim to build a reactive form with a parent form and multiple child forms. The data that needs to be displayed in the form has the following structure:

    data{
    "extraInformation": false
    "cars": [
    {
     "Id": 48,  
    "Period": { 
    "Start": null, 
    "End": null }, 
    "Rentalstats": null, 
    "Reason": null 
    } 
    ]
    }

How can I achieve this? This is what I have attempted so far:

this.form = this.formBuilder.group({

    extraInformation: [this.data.ExtraInformation, [Validators.required]],
    cars: this.fb.array([this.addDetailFormGroup()]),
});

addDetailFormGroup() {
  this.form = new FormGroup({
    Reason: new FormControl(this.data?.cars?.Reason, Validators.required),
    Rentalstats: new FormControl(this.data?.cars?.Rentalstats, Validators.required),
    Period: new FormGroup([this.initListFormGroup()]),
  });
  initListFormGroup() {
    return new FormGroup({
      Start: new FormControl(this.data?.cars?.Period?.Start, Validators.required),
      End: new FormControl(this.data?.cars?.Period?.End, Validators.required),
    });
  }

However, I am encountering an issue where I get a "Cannot read properties of undefined (reading 'Start')" error.

Any assistance on this matter would be greatly appreciated.

angular typescript formarray formgroups

Answer 1

Answer №1

It appears that your code is not ready for compilation due to several errors:

Attempting to reassign the FormGroup instance with form controls like Reason, Rentalstats, and Period will overwrite the original FormGroup containing extraInformation and the cars array.
Based on the provided data, accessing this.data?.cars as an array means you cannot directly reference fields like
```
Reason</code. To properly handle this, you need to iterate through each element in the <code>cars
```
array, creating a new FormGroup for each element and adding it to the cars FormArray.
The way you are assigning the FormGroup instance to Period is incorrect. Your current code is attempting to assign a FormGroup to a FormGroup control under Period.
Declaring the initListFormGroup method inside the addDetailFormGroup method is not the proper approach. It should be declared outside of that method.

The method names used to create the FormGroup are not clear or meaningful. Consider using names like initCarFormArray and initPeriodFormGroup for improved readability.

Below is an example of the component code to create the form, its nested FormArray, and

FormGroup(s):</p>
<pre><code>ngOnInit() {
  this.form = this.formBuilder.group({
    extraInformation: [this.data.extraInformation, [Validators.required]],
    cars: this.formBuilder.array([]),
  });

  this.initCarFormArray();
}

initCarFormArray() {
  for (let car of this.data.cars) {
    let carFormGroup = this.formBuilder.group({
      Reason: new FormControl(car?.Reason, Validators.required),
      Rentalstats: new FormControl(car?.Rentalstats, Validators.required),
      Period: this.initPeriodFormGroup(car.Period),
    });

    this.cars.push(carFormGroup);
  }
}

initPeriodFormGroup(period: any) {
  return new FormGroup({
    Start: new FormControl(period?.Start, Validators.required),
    End: new FormControl(period?.End, Validators.required),
  });
}

get cars(): FormArray {
  return this.form.controls.cars as FormArray;
}

To generate the form in HTML:

<div [formGroup]="form">
  <div>
    <span>ExtraInformation:</span>
    <input formControlName="extraInformation" />
  </div>

  <div formArrayName="cars">
    <ng-container *ngFor="let controls of cars.controls; let i = index;">
      <div [formGroupName]="i">
        <div formGroupName="Period">
          <div>
            <span>Start:</span>
            <input formControlName="Start" />
          </div>

          <div>
            <span>End:</span>
            <input formControlName="End" />
          </div>
        </div>

        <div>
          <span>Rentalstats:</span>
          <input formControlName="Rentalstats" />
        </div>

        <div>
          <span>Reason:</span>
          <input formControlName="Reason" />
        </div>
      </div>
    </ng-container>
  </div>
</div>

View Demo on StackBlitz

Answer 2

It appears that your code is not ready for compilation due to several errors:

Attempting to reassign the FormGroup instance with form controls like Reason, Rentalstats, and Period will overwrite the original FormGroup containing extraInformation and the cars array.
Based on the provided data, accessing this.data?.cars as an array means you cannot directly reference fields like
```
Reason</code. To properly handle this, you need to iterate through each element in the <code>cars
```
array, creating a new FormGroup for each element and adding it to the cars FormArray.
The way you are assigning the FormGroup instance to Period is incorrect. Your current code is attempting to assign a FormGroup to a FormGroup control under Period.
Declaring the initListFormGroup method inside the addDetailFormGroup method is not the proper approach. It should be declared outside of that method.

The method names used to create the FormGroup are not clear or meaningful. Consider using names like initCarFormArray and initPeriodFormGroup for improved readability.

Below is an example of the component code to create the form, its nested FormArray, and

FormGroup(s):</p>
<pre><code>ngOnInit() {
  this.form = this.formBuilder.group({
    extraInformation: [this.data.extraInformation, [Validators.required]],
    cars: this.formBuilder.array([]),
  });

  this.initCarFormArray();
}

initCarFormArray() {
  for (let car of this.data.cars) {
    let carFormGroup = this.formBuilder.group({
      Reason: new FormControl(car?.Reason, Validators.required),
      Rentalstats: new FormControl(car?.Rentalstats, Validators.required),
      Period: this.initPeriodFormGroup(car.Period),
    });

    this.cars.push(carFormGroup);
  }
}

initPeriodFormGroup(period: any) {
  return new FormGroup({
    Start: new FormControl(period?.Start, Validators.required),
    End: new FormControl(period?.End, Validators.required),
  });
}

get cars(): FormArray {
  return this.form.controls.cars as FormArray;
}

To generate the form in HTML:

<div [formGroup]="form">
  <div>
    <span>ExtraInformation:</span>
    <input formControlName="extraInformation" />
  </div>

  <div formArrayName="cars">
    <ng-container *ngFor="let controls of cars.controls; let i = index;">
      <div [formGroupName]="i">
        <div formGroupName="Period">
          <div>
            <span>Start:</span>
            <input formControlName="Start" />
          </div>

          <div>
            <span>End:</span>
            <input formControlName="End" />
          </div>
        </div>

        <div>
          <span>Rentalstats:</span>
          <input formControlName="Rentalstats" />
        </div>

        <div>
          <span>Reason:</span>
          <input formControlName="Reason" />
        </div>
      </div>
    </ng-container>
  </div>
</div>

View Demo on StackBlitz

Groups of FormControls can be created using Formgroups and Form

Answer №1

Similar questions

Is there a way to programmatically reselect a checkbox in Angular if it has been previously unselected?

Issue with arrow function not being invoked in a React TypeScript component's prop inside a function

Angular application's HTML Canvas unexpectedly changes to a black color when I begin drawing

Issue with secondary router outlet nested within primary router outlet not functioning properly

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Troubleshooting problem with Webpack and TypeScript (ts-loader)

Is it possible for Azure static web apps to utilize Azure App Service as their backend?

Tips on providing validation for either " _ " or " . " (select one) in an Angular application

Why is the Angular6 HttpClient Post method failing when Postman shows success?

Changing the environment variable in an Angular application with user input

Initializing the ngOnInit function with 'this' keyword

Validating nested objects in YUP with the potential for zero or multiple properties present

What is the best way to hide the back arrow in Cordova UWP for Ionic 4?

Exploring the Global Reach of Angular 9

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

Is the component experiencing issues with its style functionality?

"Optimize the appearance of group headers and items in Angular select style

Mastering the Art of Concise Writing: Tips to

Discovering the origins of the node.js native modules and delving into the intricacies of typed modules

Encountering an unexpected token error while trying to compile a Typescript file to Javascript, even though it had previously worked