Please enable JavaScript.

Coggle requires JavaScript to display documents.

Formularze (dwa sposoby podejścia (Podejście reaktywne (3 główne klasy…

- - - - NgForm
        
        jest automatycznie dołączana do każdego elementu <form>
        
        domyślnie tworzy instancję klasy FormGroup, która reprezentuje model i przechowuje dane formularza
        
        automatycznie wykrywa wszystkie potomne elementy HTML oznaczone dyrektywą NgModel i dodaje ich wartości do modelu formularza
        
        ngNoForm - uniemożliwia frameworkowi Angular tworzenie instancji NgForm
        
        ma właściowość exportAs zadeklarowaną w jej adnotacji Directive, która pozwala użyć wartości tej właściwości w celu tworzenia lokalnej zmiennej szablonu, odwołującej się do instancji NgForm
        
        <form #f="ngForm"></form> <pre>{{ f.value | json }}</pre>
        
        przechwytuje standardowe zdarzenie submit formularza HTML i zapobiega automatycznemu zatwierdzeniu formularza
        
        <form #f="ngForm" (ngSubmit)="onSubmit(f.value)"></form>
      - NgModel
        
        w kontekście interfejsu Forms API dyrektywa NgModel reprezentuje pojedyncze pole formularza
        
        domyślnie tworzy ona instancję klasy FormControl, która reprezentuje model i przechowuje dane pól
        
        <form> <input type="text" name="username" ngModel> </form>
        
        atrybut name jest wymagany, gdy dodajemy ngModel do elementu
        
        ngModel - nie ma żadnej wartości ani żadnych nawiasów wskazujących na składnię wiązania danych
        ngModel służy jako znacznik dla dyrektywy NgForm, która reprezentuje formularz
        
        podobnie jak NgForm, dyrektywa NgModel ma właściwość exportAs, dzięki czemu można utworzyć w szablonie zmienną, która będzie odwoływać się do instancji NgModel i jej właściwości value
        
        <form> <input type="text" name="username" ngModel #c="ngModel"> <pre>{{ c.value }}</pre> </form>
      - NgModelGroup
        
        reprezentuje część formularza i umożliwia grupowanie pól formularza
        
        tworzy obiekt zagnieżdżony w obiekcie przechowywanym w NgForm.value
        
        wszystkie pola potomne NgModelGroup stają się właściowościami w obiekcie zagnieżdżonym
        
        <form #f="ngForm"> <div ngModelGroup="fullName"> <input type="text" name="firstName" ngModel> </div> </form>  <pre>First name: {{f.value.fullName.firstName }}</pre>
  - - - FormControl
        
        niepodzielna jednostka formularza
        
        zwykle odpowiada pojedynczemu elementowi <input> ale może również reprezentować bardziej złożony komponent interfejsu użytkownika, np. kalendarz lub suwak
        
        utrzymuje bieżącą wartość elementu HTML, kótremu odpowiada, status ważności elementu oraz informację o tym, czy został zmodyfikowany
        
        let username = new FormControl('wartosc_poczatkowa');
      - FormGroup
        
        zazwyczaj reprezentuje część formularza i jest zbiorem kontrolek FormControl.FormGroup agreguje wartości i statusy każdej kontrolki FormControl
        
        jeśli jedna z kontrolek w grupie jest nieprawidłowa, cała grupa staje się nieprawidłowa
        
        ta klasa jest wygodna do zarządzania powiązanymi polami w formularzu
        
        jest również używana do reprezentowania całego formularza
        
        przykład
        
        zakres dat jest reprezentowany przez dwa pola tekstowe date, mogą być one połączone w jedną grupę w celu uzyskania zakresu dat jako pojedynczej wartości i wyświetlenia błędu, jeśli którakolwiek z dat będzie nieprawidłowa
        
        let formModel = new FormGroup({ from: new FormControl(), to : new FormControl() });
      - FormArray
        
        jest podobna do FormGroup, ale ma zmienną długość
        
        podzas gdy FormGroup reprezentuje cały formularz lub stały podzbiór pól formularza, FormArray reprezentuje zazwyczaj rosnącą kolekcję pól
        
        przykład
        
        uniemożliwienie użytkownikom wpisywanie dowolnej liczby adresów e-mail
        
        let formModel = new FormGroup({ emails: new FormArray([ new FormControl(), new FormControl() ]) });