W Angularze wypełnienie formularza danymi jest bardzo proste. W tym wpisie pokażę dwa sposoby, jak można to zrobić.

Model danych

Posłużę się tym samym modelem danych opisanym we wpisie: Angular: Jak stworzyć zagnieżdżony formularz?.

Mam taki model:

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

Tworzymy model:

interface ProductAttributes {
  width: number;
  height: number;
  weight: number;
}

interface Product {
  name: string;
  description: string;
  attributes: ProductAttributes
}

Formularz

Tworzymy taki formularz:

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(''),
    })
  });
}

Mając już model i formularz, możemy wypełnić go danymi.

Sposób 1: Metoda setValue

Metoda setValue pochodzi z klasy FormGroup. Jedynym wymaganym parametrem tej metody jest obiekt, który odzwierciedla strukturę naszego formularza. Czyli obiekt musi składać się z takiej samej struktury jak model danych formularza. Jeśli spróbujemy przekazać coś innego: na przykład będzie brakować jakiegoś pola, to operacja się nie uda.

Poprawne wywołanie:

const data: Product = {
  name: "Foo",
  description: "Lorem ipsum...",
  attributes: {
    width: 100,
    height: 50,
    weight: 25
  }
};

this.form.setValue(data);

Wystąpi błąd:

const data: Product = {
  name: "Bar"
};

this.form.setValue(data); // błąd!

Sposób 2: Metoda patchValue

Ta metoda jest bardzo podobna do poprzedniej także pochodzi z FormGroup, ale jest pewna różnica. Można do niej przekazać obiekt, którego struktura nie jest identyczna jak model danych formularza. Na przykład jeśli przekażemy do wypełnienia tylko jedno pole, to operacja się uda.

Poprawne wywołanie:

const data: Product = {
  name: "Bar"
};

this.form.patchValue(data);

Możemy nawet przekazać jakieś nieistniejące pole:

const data: Product = {
  name: "Bar",
  price: 150
};

this.form.patchValue(data);

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.

Angular udostępnia sposób przekazywania danych między komponentami: rodzic-dziecko zwany: wiązanie dwukierunkowe (ang.: two-way binding).

Wiązanie jednokierunkowe pozwala na przekazanie danych od rodzica do dziecka. Jeśli u rodzica te dane się zmienią, to zostaną od razu przekazane do dziecka. Z kolei wiązanie dwukierunkowe umożliwia wymianę danych w obu kierunkach: rodzic <--> dziecko. Czyli jeśli zmienimy dane komponecie dziecko, to komponent rodzic także te zmiany odbierze.

Składania

Jednokierunkowe wiązanie:

HTML:

<child [data]="data"></child>

Dwukierunkowe wiązanie:

HTML:

<child [(data)]="data"></child>

Dwukierunkowe wiązanie przykład

Komponent rodzic

parent.component.html:

<div>Counter(parent): <strong>{{ counter }}</strong></div>

<child [(counter)]="counter"></child>

parent.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {

  public counter: number = 10;
}

Komponent dziecko

child.component.html:

<div>Counter(child): <strong>{{ counter }}</strong></div>
<button (click)="increment()">Incremenet</button>
<button (click)="decrement()">Decremenet</button>

child.component.ts:

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
})
export class ChildComponent {

  @Input()
  counter: number = 0;

  @Output()
  counterChange: EventEmitter<number> = new EventEmitter<number>();

  public increment() {
    this.counter += 1;
    this.counterChange.emit(this.counter);
  }

  public decrement() {
    this.counter -= 1;
    this.counterChange.emit(this.counter);
  }
}

Wystarczy poklikać w przyciski. Zmian widać zarówno u rodzica, jak i dziecka.

Funkcja typu arrow w JavaScript ma taką postać:

() => {
...
}

Jest to wygodna alternatywa dla tradycyjnej postaci funkcji.

Funkcja typu arrow pozwala także na bezpośrednie zwrócenie wartości bez użycia return:

const sum = () => 1 + 2;
sum(); // 3

Ale jak zwrócić bezpośrednio obiekt z takiej funkcji beż użycia return?

Taki zapis nie zadziała:

const createObject = () => { label: 'test', value: 5 }; // Zwróci błąd

Zwracanie bezpośrednio obiektu

Rozwiązanie tego problemu okazuje się banalne. Wystarczy zwracany obiekt umieścić w nawiasach () jak:

() => ({
  label: 'test',
  value: 5
});

Poniżej podaję jeszcze przykład:

const data = [
	{ title: 'Foo', value: 7 },
	{ title: 'Bar', value: 10 }
].map((current) => 
	(
		{ label: current.title, amount: current.value }
	)
);
console.log(data); // [ { label: 'Foo', amount: 7 }, { label: 'Bar', amount: 10 } ]