Angular: Jak stworzyć zagnieżdżony formularz?

Załóżmy, że mamy taki model danych:

{
  name: "Foo",
  description: "Lorem ipsum...",
  attributes: {
    width: 100,
    height: 50,
    weight: 25
  }
}

I chcemy dla takiej struktury danych stworzyć formularz.

Jak to zrobić w Angular?

Zagnieżdżone formularze

TypeScript:

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

@Component({
  selector: 'product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent {
  form = new FormGroup({
    name: new FormControl(''),
    description: new FormControl(''),
    attributes: new FormGroup({
      width: new FormControl(''),
      height: new FormControl(''),
      weight: new FormControl(''),
    })
  });
}

Żeby stworzyć zagnieżdżony formularz, wystarczy posłużyć się FormGroup.

<form [formGroup]="form">
	<div>
		<label for="name">Name: </label>
		<input id="name" formControlName="name">

		<label for="description">Description: </label>
		<textarea id="description" formControlName="description"></textarea>
	</div>
	
	<div formGroupName="attributes">
		<h2>Attributes</h2>

		<label for="width">Width: </label>
		<input id="width" formControlName="width">

		<label for="height">Height: </label>
		<input id="height" formControlName="height">

		<label for="weight">Weight: </label>
		<input id="weight" formControlName="weight">
	</div>
</form>

Za pomocą formGroupName przypisujemy nazwę zagnieżdżonej części formularza w tym przypadku to attributes.