Angular - sterowanie kontrolkami, walidacja oraz tworzenie formularzy z wykorzystaniem FormControl i FormGroup z modułu ReactiveForms

Stronę tą wyświetlono już: 17 razy

Wstęp

Omówiłem już na wcześniejszej stronie jak tworzyć wiązania dwukierunkowe z kontrolkami HTML za pomocą dyrektywy ngModel. Na tej stronie opowiem co nieco o tym jak zrobić to samo za pomocą klasy FormControl i FormGroup. Przy wykorzystaniu tych klas nie działa bindowanie dwukierunkowe związane z dyrektywą ngModel a ustawianie i pobieranie danych z kontrolki wygląda inaczej. W tym przypadku również i podpinanie walidatorów będzie realizowane z poziomu obiektu klasy a ich tworzenie uprości się do stworzenia klasy z statyczną funkcją, która podpięta do obiektu klasy FormControl będzie walidowała daną kontrolkę.

Klasa FormControl i komunikacja z pojedynczą kontrolką

W celu zrealizowania komunikacji dwukierunkowej z kontrolką za pomocą obiektu klasy FormControl konieczne jest utworzenie takiego obiektu wewnątrz klasy komponentu i podpięcie jego do kontrolki w kodzie HTML co też i czynię z najdzikszą rozkoszą:

Listing 1
  1. selectControl: FormControl;
  3. countries: any[] = [
  4. { id: 0, name: 'Polska' },
  5. { id: 1, name: 'Francja' },
  6. { id: 2, name: 'Belgia' },
  7. { id: 3, name: 'Bułgaria' },
  8. ];
  10. ngOnInit(): void {
  11. this.selectCountry = new FormControl(2, Validators.required);
  12. }

Zaś w kodzie HTML:

Listing 2
  1. <mat-form-field appearance="outline">
  2. <mat-label>Kraje</mat-label>
  3. <mat-select [formControl]="selectCountry">
  4. <mat-option *ngFor="let country of countries" [value]="country.id">
  5. {{country.name}}
  6. </mat-option>
  7. </mat-select>
  8. </mat-form-field>

Stworzenie własnego walidatora dla klasy FormControl będzie wyglądało następująco:

Listing 3
  1. export class MyValidators {
  3. static frobiddenCountry(forbiddenCountry: string): ValidatorFn {
  4. return (control: AbstractControl): ValidationErrors | null => {
  5. const nameRe: RegExp = new RegExp(forbiddenCountry, 'i');
  6. const forbidden = nameRe.test(control.value);
  7. return forbiddenCountry
  8. ?
  9. (forbidden ? { forbiddenCountry: true } : null)
  10. :
  11. null;
  12. };
  13. }
  14. }

Użycie takiego walidatora jest dziecinnie proste, pod warunkiem, że korzystasz z klasy FormControl:

Listing 4
  1. myCountry: FormControl;
  3. ngOnInit() {
  4. this.myCountry = new FormControl('Polska', MyValidators.frobiddenCountry('Rosja'));
  5. }

i w kodzie HTML:

Listing 5
  1. <mat-form-field appearance="outline">
  2. <mat-label>Kraj</mat-label>
  3. <input matInput [formControl]="myCountry">
  4. <mat-error>
  5. <span *ngIf="myCountry.hasError('forbiddenCountry')">Rosja nigdy! Rosja nigdy!</span>
  6. </mat-error>
  7. </mat-form-field>

Tworzenie i walidacja formularzy z wykorzystaniem FormGroup

Klasa FormGroup umożliwia stworzenie obiektu grupy kontrolek formularza, do których dane zwrócone przez serwis mogą zostać w bardzo łatwy sposób wstawione jak i odczytane. Oto przykład, jak może wyglądać stworzenie grupy kontrolek i przypisanie im wartości zawartych w interfejsie:

Listing 6
  1. formGroup: FormGroup;
  3. ngOnInit() {
  4. this.formGroup = this.formBuilder.group({
  5. yourCountry: ['Polska', [Validators.required]],
  6. firstName: ['', [Validators.required, Validators.maxLength(20), Validators.minLength(5)]],
  7. lastName: ['', [Validators.required, Validators.maxLength(20), Validators.minLength(5)]],
  8. });
  10. this.formGroup.patchValue({ yourCountry: 'Polska', firstName: 'Grzegorz', lastName: 'Brzęczyszczykiewicz' });
  11. this.addressGroup.patchValue( {street: 'Zadupie Wielkie', house: 10 });
  12. }

W kodzie HTML komponentu:

Listing 7
  1. <form [formGroup]="formGroup">
  3. <mat-form-field appearance="outline">
  4. <mat-label>Kraj</mat-label>
  5. <input matInput formControlName="yourCountry">
  6. <mat-error>
  7. <div *ngIf="formGroup.get('yourCountry').hasError('required')">To pole jest wymagane</div>
  8. <div *ngIf="formGroup.get('yourCountry').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  9. <div *ngIf="formGroup.get('yourCountry').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  10. </mat-error>
  11. </mat-form-field>
  13. <mat-form-field appearance="outline">
  14. <mat-label>Imię</mat-label>
  15. <input matInput formControlName="firstName">
  16. <mat-error>
  17. <div *ngIf="formGroup.get('firstName').hasError('required')">To pole jest wymagane</div>
  18. <div *ngIf="formGroup.get('firstName').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  19. <div *ngIf="formGroup.get('firstName').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  20. </mat-error>
  21. </mat-form-field>
  23. <mat-form-field appearance="outline">
  24. <mat-label>Nazwisko</mat-label>
  25. <input matInput formControlName="lastName">
  26. <mat-error>
  27. <div *ngIf="formGroup.get('lastName').hasError('required')">To pole jest wymagane</div>
  28. <div *ngIf="formGroup.get('lastName').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  29. <div *ngIf="formGroup.get('lastName').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  30. </mat-error>
  31. </mat-form-field>
  33. <button mat-button type="submit" [disabled]="formGroup.invalid">Wyślij</button>
  35. </form>

Pobranie surowych danych z formularza również jest proste, albowiem wystarczy zrobić coś takiego:

Listing 8
  1. console.log(this.formGroup.getRawValue());

by w konsoli przeglądarki zobaczyć coś takiego:

{
  "yourCountry": "Polska",
  "firstName": "",
  "lastName": ""
}

Zagnieżdżanie obiektów w formularzu

W jednym formularzu można tak na prawdę zagnieździć więcej niż jeden obiekt zgrupowany w podobiekcie formularza. Oto przykład kodu HTML:

Listing 9
  1. <form [formGroup]="formGroup">
  2. <mat-form-field appearance="outline">
  3. <mat-label>Kraj</mat-label>
  4. <input matInput formControlName="yourCountry">
  5. <mat-error>
  6. <div *ngIf="formGroup.get('yourCountry').hasError('required')">To pole jest wymagane</div>
  7. <div *ngIf="formGroup.get('yourCountry').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  8. <div *ngIf="formGroup.get('yourCountry').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  9. </mat-error>
  10. </mat-form-field>
  12. <mat-form-field appearance="outline">
  13. <mat-label>Imię</mat-label>
  14. <input matInput formControlName="firstName">
  15. <mat-error>
  16. <div *ngIf="formGroup.get('firstName').hasError('required')">To pole jest wymagane</div>
  17. <div *ngIf="formGroup.get('firstName').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  18. <div *ngIf="formGroup.get('firstName').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  19. </mat-error>
  20. </mat-form-field>
  22. <mat-form-field appearance="outline">
  23. <mat-label>Nazwisko</mat-label>
  24. <input matInput formControlName="lastName">
  25. <mat-error>
  26. <div *ngIf="formGroup.get('lastName').hasError('required')">To pole jest wymagane</div>
  27. <div *ngIf="formGroup.get('lastName').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  28. <div *ngIf="formGroup.get('lastName').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  29. </mat-error>
  30. </mat-form-field>
  32. <div formGroupName="address">
  34. <mat-form-field appearance="outline">
  35. <mat-label>Ulica</mat-label>
  36. <input matInput formControlName="street">
  37. <mat-error>
  38. <div *ngIf="formGroup.controls['address'].get('street').hasError('required')">To pole jest wymagane</div>
  39. <div *ngIf="formGroup.controls['address'].get('street').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  40. <div *ngIf="formGroup.controls['address'].get('street').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  41. </mat-error>
  42. </mat-form-field>
  44. <mat-form-field appearance="outline">
  45. <mat-label>Numer domu</mat-label>
  46. <input matInput type="number" formControlName="house">
  47. <mat-error>
  48. <div *ngIf="formGroup.controls['address'].get('house').hasError('required')">To pole jest wymagane</div>
  49. <div *ngIf="formGroup.controls['address'].get('house').hasError('minlength')">Numer domu nie może mniejszy niż 1</div>
  50. </mat-error>
  51. </mat-form-field>
  53. </div>
  55. <button mat-button type="submit" [disabled]="formGroup.invalid">Wyślij</button>
  57. </form>

I kod komponentu:

Listing 10
  1. formGroup: FormGroup;
  2. addressGroup: FormGroup;
  4. ngOnInit() {
  6. this.addressGroup = this.formBuilder.group({
  7. street: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]],
  8. house: [1, [Validators.required, Validators.min(1)]]
  9. });
  11. this.addressGroup.patchValue( {street: 'Zadupie Wielkie', house: 10 });
  13. this.formGroup = this.formBuilder.group({
  14. yourCountry: ['Polska', [Validators.required]],
  15. firstName: ['', [Validators.required, Validators.maxLength(20), Validators.minLength(5)]],
  16. lastName: ['', [Validators.required, Validators.maxLength(20), Validators.minLength(5)]],
  17. address: this.addressGroup
  18. });
  20. this.formGroup.patchValue({ yourCountry: 'Polska', firstName: 'Grzegorz', lastName: 'Brzęczyszczykiewicz' });
  22. console.log(this.formGroup.getRawValue());
  23. }

Wynik danych wyciągniętych z formularza i wyświetlonych w konsoli przeglądarki:

{
  "yourCountry": "Polska",
  "firstName": "Grzegorz",
  "lastName": "Brzęczyszczykiewicz",
  "address": {
    "street": "Zadupie Wielkie",
    "house": 10
  }
}

Dynamicznie rozszerzalny formularz

A co jeśli chciałbym stworzyć formularz, który będzie umożliwiał dynamiczne dodawanie np. nowego rekordu danych? Czy da się coś takiego zrobić? Da się, albowiem FormBuilder ma opcję tworzenia tablicy przechowójący z kolei obiekty klasy AbstractControl. Tak się jakoś dziwnie składa, że po tej abstrakcyjnej klasie dziedziczy nie co innego ale klasa FormGroup. A oto i przebiegły sposób, w jaki można to wykorzystać do stworzenia prawdziwie rozszerzalnego formularza:

Listing 11
  1. table: FormArray;
  2. students = [{ studentName: 'Grzegorz', studentSurname: 'Brzęczyszczykiwicz' },
  3. { studentName: 'Marian', studentSurname: 'Pietrucha' }];
  5. ngOnInit() {
  7. this.addressGroup = this.formBuilder.group({
  8. street: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]],
  9. house: [1, [Validators.required, Validators.min(1)]]
  10. });
  12. this.addressGroup.patchValue({ street: 'Zadupie Wielkie', house: 10 });
  14. this.table = this.formBuilder.array([
  15. this.formBuilder.group(
  16. {
  17. studentName: ['', Validators.required],
  18. studentSurname: ['', Validators.required]
  19. })
  20. ]);
  22. this.formGroup = this.formBuilder.group({
  23. yourCountry: ['Polska', [Validators.required]],
  24. firstName: ['', [Validators.required, Validators.maxLength(20), Validators.minLength(5)]],
  25. lastName: ['', [Validators.required, Validators.maxLength(20), Validators.minLength(5)]],
  26. address: this.addressGroup,
  27. table: this.table
  28. }
  29. );
  31. this.students.forEach((student) => { this.table.push(this.formBuilder.group(student)); });
  33. this.formGroup.patchValue({ yourCountry: 'Polska', firstName: 'Grzegorz', lastName: 'Brzęczyszczykiewicz' });
  35. console.log(this.formGroup.getRawValue());
  37. this.selectCountry = new FormControl(2, Validators.required);
  38. this.myCountry = new FormControl('Polska', MyValidators.frobiddenCountry('Rosja'));
  39. }

Zaś w kodzie HTML:

Listing 12
  1. <mat-form-field appearance="outline">
  2. <mat-label>Kraje</mat-label>
  3. <mat-select [formControl]="selectCountry">
  4. <mat-option *ngFor="let country of countries" [value]="country.id">
  5. {{country.name}}
  6. </mat-option>
  7. </mat-select>
  8. </mat-form-field>
  10. <mat-form-field appearance="outline">
  11. <mat-label>Kraj</mat-label>
  12. <input matInput [formControl]="myCountry">
  13. <mat-error>
  14. <div *ngIf="myCountry.hasError('forbiddenCountry')">Rosja nigdy! Rosja nigdy!</div>
  15. </mat-error>
  16. </mat-form-field>
  18. <form [formGroup]="formGroup">
  19. <mat-form-field appearance="outline">
  20. <mat-label>Kraj</mat-label>
  21. <input matInput formControlName="yourCountry">
  22. <mat-error>
  23. <div *ngIf="formGroup.get('yourCountry').hasError('required')">To pole jest wymagane</div>
  24. <div *ngIf="formGroup.get('yourCountry').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  25. <div *ngIf="formGroup.get('yourCountry').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  26. </mat-error>
  27. </mat-form-field>
  29. <mat-form-field appearance="outline">
  30. <mat-label>Imię</mat-label>
  31. <input matInput formControlName="firstName">
  32. <mat-error>
  33. <div *ngIf="formGroup.get('firstName').hasError('required')">To pole jest wymagane</div>
  34. <div *ngIf="formGroup.get('firstName').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  35. <div *ngIf="formGroup.get('firstName').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  36. </mat-error>
  37. </mat-form-field>
  39. <mat-form-field appearance="outline">
  40. <mat-label>Nazwisko</mat-label>
  41. <input matInput formControlName="lastName">
  42. <mat-error>
  43. <div *ngIf="formGroup.get('lastName').hasError('required')">To pole jest wymagane</div>
  44. <div *ngIf="formGroup.get('lastName').hasError('minlength')">Długość ciągu znaków krótsza od 5</div>
  45. <div *ngIf="formGroup.get('lastName').hasError('maxlength')">Długość ciągu znaków dłuższa od 20</div>
  46. </mat-error>
  47. </mat-form-field>
  49. <div formGroupName="address">
  51. <mat-form-field appearance="outline">
  52. <mat-label>Ulica</mat-label>
  53. <input matInput formControlName="street">
  54. <mat-error>
  55. <div *ngIf="formGroup.controls['address'].get('street').hasError('required')">To pole jest wymagane</div>
  56. <div *ngIf="formGroup.controls['address'].get('street').hasError('minlength')">Długość ciągu znaków krótsza od 5
  57. </div>
  58. <div *ngIf="formGroup.controls['address'].get('street').hasError('maxlength')">Długość ciągu znaków dłuższa od
  59. 20</div>
  60. </mat-error>
  61. </mat-form-field>
  63. <mat-form-field appearance="outline">
  64. <mat-label>Numer domu</mat-label>
  65. <input matInput type="number" formControlName="house">
  66. <mat-error>
  67. <div *ngIf="formGroup.controls['address'].get('house').hasError('required')">To pole jest wymagane</div>
  68. <div *ngIf="formGroup.controls['address'].get('house').hasError('minlength')">Numer domu nie może mniejszy niż 1
  69. </div>
  70. </mat-error>
  71. </mat-form-field>
  73. </div>
  75. <div formArrayName="table" *ngFor="let student of formGroup.controls['table'].controls; let i = index;">
  76. <div [formGroupName]="i">
  77. <mat-form-field appearance="outline">
  78. <mat-label>Imię studenta</mat-label>
  79. <input matInput formControlName="studentName">
  80. <mat-error>
  81. <div *ngIf="formGroup.controls['address'].get('house').hasError('required')">To pole jest wymagane</div>
  82. </mat-error>
  83. </mat-form-field>
  85. <mat-form-field appearance="outline">
  86. <mat-label>Nazwisko studenta</mat-label>
  87. <input matInput formControlName="studentSurname">
  88. <mat-error>
  89. <div *ngIf="formGroup.controls['address'].get('house').hasError('required')">To pole jest wymagane</div>
  90. </mat-error>
  91. </mat-form-field>
  93. <button *ngIf="i === 0" mat-icon-button (click)="add()"><mat-icon>add_circle</mat-icon></button>
  94. </div>
  95. </div>
  97. <button mat-button type="submit" [disabled]="formGroup.invalid">Wyślij</button>
  99. </form>
Angular - widok dynamicznie rozszerzalnego formularza
Rys. 1
Angular - widok dynamicznie rozszerzalnego formularza

Komentarze