Opanowanie formularzy reaktywnych Angular: uwolnienie magii formularzy za pomocą FormBuilder, FormGroup, FormArray i FormControl

Opublikowane ponownie przez Plato

Obserwuje: 0

W dziedzinie programowania Angular formularze reaktywne są jak Gandalfowie obsługi formularzy. Posiadają ogromną moc, elastyczność i zdolność prowadzenia użytkowników przez złożone podróże po formularzach, jak doświadczony czarodziej. U podstaw tej magii formy leżą cztery podstawowe elementy: FormBuilder, FormGroup, FormArray i FormControl. Dzisiaj wyruszamy w dziwaczną przygodę z tymi czarującymi narzędziami, odkrywając ich magię za pomocą zachwycających przykładów, które wprawią Cię w oczarowanie. Zapnij pasy i przygotuj się na zniewalający świat Angular Reactive Forms!

Gdyby formy reaktywne były magicznym lasem, Budowniczy Form byłby mieszkającym w nim starożytnym czarodziejem. Ta mistyczna istota pomaga nam w bezproblemowym konstruowaniu formantów i grup. Pomyśl o FormBuilder jako o swoim zaufanym pomocniku, szepczącym zaklęcia, które wyczarowują elementy sterujące formami za pomocą wirtualnej różdżki.

Wyobraź sobie, że masz formularz z polami „nazwa” i „e-mail”. Za pomocą FormBuilder możesz utworzyć FormGroup i odpowiadające jej kontrolki w następujący sposób:

import { FormBuilder, FormGroup, FormArray } from '@angular/forms'; constructor(private formBuilder: FormBuilder) { this.formGroup = this.formBuilder.group({ name: '', email: '', addresses: this.formBuilder.array([]) });
}

FormGroup: Sojusz Elementów Formy

FormGroup jest jak Liga Sprawiedliwych kontrolek formularzy, łącząc je w spójną całość. Wprowadza harmonię do chaotycznego świata obsługi formularzy. Tak jak Batman, Wonder Woman i Superman współpracują ze sobą, aby uratować sytuację, FormGroup pozwala nam zarządzać wieloma elementami sterującymi jako jedną jednostką.

Załóżmy, że mamy formularz z polami „nazwa użytkownika” i „hasło”. Tworząc FormGroup, możemy powiązać ze sobą te kontrolki:

import { FormGroup, FormControl } from '@angular/forms'; this.formGroup = new FormGroup({ username: new FormControl(''), password: new FormControl(''), addresses: new FormArray([])
});

FormArray: stale powiększająca się szafka na mikstury

W mistycznej krainie Angular FormArray FormArray działa jak rozszerzająca się szafka na mikstury, pozwalając nam wymyślać dynamiczne tablice kontrolek form. Doskonale sprawdza się w sytuacjach, w których potrzebujemy wielu instancji tego samego pola lub gdy nasza forma musi się dostosowywać i dynamicznie rosnąć.

Wyobraź sobie scenariusz, w którym musimy zebrać wiele adresów e-mail. Dzięki FormArray możemy łatwo stworzyć dynamiczną tablicę kontrolek formularzy:

import { FormGroup, FormControl, FormArray } from '@angular/forms'; this.formGroup = new FormGroup({ name: new FormControl(''), email: new FormControl(''), addresses: new FormArray([ new FormGroup({ street: new FormControl(''), city: new FormControl(''), country: new FormControl('') }) ])
});

Aby dynamicznie dodać nowy adres FormGroup, możemy użyć następującego kodu:

 addAddress() { const addressFormGroup = new FormGroup({ street: new FormControl(''), city: new FormControl(''), country: new FormControl('') }); const addresses = this.formGroup.get('addresses') as FormArray; addresses.push(addressFormGroup);
}

Aby dynamicznie usunąć adres FormGroup, możemy użyć następującego kodu:

 removeAddress(index: number) { const addresses = this.formGroup.get('addresses') as FormArray; addresses.removeAt(index);
}

Szablon HTML:

Teraz dodajmy szablon HTML do wyświetlania i interakcji z naszym formularzem:

<form [formGroup]="formGroup"> <label> Name: <input type="text" formControlName="name"> </label> <label> Email: <input type="email" formControlName="email"> </label> <div formArrayName="addresses"> <div *ngFor="let address of formGroup.get('addresses').controls; let i = index;"> <fieldset [formGroup]="address"> <legend>Address {{ i + 1 }}</legend> <label> Street: <input type="text" formControlName="street"> </label> <label> City: <input type="text" formControlName="city"> </label> <label> Country: <input type="text" formControlName="country"> </label> <button (click)="removeAddress(i)">Remove Address</button> </fieldset> </div> </div> <button (click)="addAddress()">Add Address</button>
</form>

W mistycznym królestwie Angular Reactive Forms, FormBuilder, FormGroup, FormArray i FormControl to czarodzieje i czarodziejki, które ożywiają nasze formy. Działają one w harmonii niczym urzekająca symfonia, tworząc zachwycające doświadczenia użytkowników i radząc sobie nawet z najbardziej złożonymi podróżami formularzy. Uwolnij więc swoją kreatywność i pozwól tym czarującym narzędziom poprowadzić Cię przez magiczną sferę obsługi formularzy w Angular! Szczęśliwa magia formy!

Zastrzeżenie: żadne mityczne stworzenia nie ucierpiały podczas tworzenia tego artykułu. Użycie magicznych metafor ma na celu wyłącznie rozbawienie.