X

Vitajte!

Nepremeškajte nové videá a zaujimavé novinky zo sveta Angularu 2+...

00:16 - 00:17Vitajte v novej časti
00:18 - 00:20v tejto časti si povieme o formulároch
00:21 - 00:24Formuláre sú pilierom každej biznis aplikácie
00:24 - 00:26Použitia sú rôzne
00:26 - 00:29od prihlasovacieho formuláru, kontaktného formuláru
00:29 - 00:32až po zložitejšie formuláre
00:32 - 00:34napríklad pre zabookovanie si dovolenky
00:34 - 00:36Pri formulároch je dôležité
00:36 - 00:41aby užívateľa spoľahlivo previedli cez workflow aplikácie a odchytili prípadné chyby
00:41 - 00:43V Angulari existujú 2 typy formulárov
00:43 - 00:46Template-driven formuláre
00:46 - 00:49a Reaktívne formuláre, tzv. Model-driven
00:50 - 00:53V tejto časti si ukážeme základnú prácu s formulármi
00:53 - 00:56a vytvoríme si základný template-driven formulár
00:57 - 01:00Čo to znamená Template-driven formulár?
01:01 - 01:05V template-driven formulári viažeme logiku formuláru
01:05 - 01:07napríklad jeho validácie
01:07 - 01:09na template a jeho HTML
01:09 - 01:13Znamená to to, že ak máme napríklad input
01:13 - 01:16v našom template ktorý obsahuje required parameter
01:16 - 01:20alebo min-length chceme aby tomu Angular rozumel a podľa toho sa zariadil
01:20 - 01:25teda ak sa budeme snažiť odoslať formulár bez takejto vyplnenej hodnoty
01:25 - 01:29formulár vyvolá chybu ktorú budeme vedieť odchytiť a spracovať
01:30 - 01:32Poďme si to ukázať na príklade
01:39 - 01:42Vytvorme si novú Angular aplikáciu
01:51 - 01:54Vojdime do adresára myApp
01:54 - 01:56a spustime si ju pomocou príkazu "ng serve"
01:56 - 01:59Ak dostaneme chybu o chýbajúcom module
02:00 - 02:03Nainštalujeme si ju pomocou príkazu "npm install"
03:07 - 03:10Vytvorme si 4 premenné a to
03:10 - 03:13"name" typu string, "surname" typu string
03:13 - 03:16"selectedOccupation" typu string
03:18 - 03:22a "occupation" čo bude array JSON objektov
03:23 - 03:25Tie použijeme v našom ukážkovom formulári
03:38 - 03:41Vytvorme si základné prvky našeho formuláru
03:41 - 03:43Input pre name
03:44 - 03:47Hodnotu mu nastavíme z premennej "name"
03:47 - 03:49pomocou ngModelu
03:55 - 03:58Rovnako vytvoríme aj políčko
03:58 - 04:01surname s jediným rozdielom
04:01 - 04:04že pridáme tam parameter required lebo budeme chcieť
04:04 - 04:06aby toto políčko bolo povinné
04:10 - 04:12Ďalej si vytvoríme rozbaľovátko
04:12 - 04:15ktoré bude obsahovať hodnoty z premennej occupation
04:15 - 04:18pomocou ngModelu tam ale zároveň priradíme
04:18 - 04:20aj selectedOccupation čo bude
04:20 - 04:22vybraná hodnota tohoto dropdownu
04:34 - 04:36Samotné hodnoty do našeho dropdownu
04:36 - 04:39vložíme pomocou ngFor
04:50 - 04:53Náš template ale generuje chybu... to preto, že
04:54 - 04:56musíme najprv importnúť formsModule
04:56 - 04:59aby sme mohli použiť ngModel
05:11 - 05:14ngModel už pre naše formulárové prvky
05:14 - 05:16generuje CSS triedy ktoré definujú
05:16 - 05:20aktuálny stav daného formulárového prvku
05:20 - 05:22Poďme si to trochu naštýlovať
05:23 - 05:26Ak daný prvok spĺňa všetky validačné podmienky
05:26 - 05:29obsahuje classu "ng-valid"
05:29 - 05:32ak nie, tak "ng-invalid"
05:34 - 05:36Ako môžete vidieť políčko "surname"
05:36 - 05:39je označené čarvenou farbou pretože je neplatné
05:39 - 05:42obsahuje totiž parameter required takže musí mať hodnotu
05:42 - 05:45Akonáhle do neho niečo napíšeme
05:45 - 05:46zmení sa na validné
05:52 - 05:54Poďme si ukázať ako funguje elementRef
05:54 - 05:58do nášho formulárového prvku pridáme #myName
05:58 - 06:01myName je názov referencie ktorú si určíme, môže to byť čokoľvek
06:02 - 06:03Takáto referencia nám o našom
06:03 - 06:07formulárovom prvku poskytne základné informácie
06:07 - 06:09a to napríklad:
06:12 - 06:16Placeholder ku ktorému pristúpime pomocou zápisu
06:16 - 06:18myName.placeholder
06:18 - 06:21Tak isto vieme získať typ elementu a jeho hodnotu
06:21 - 06:22value
06:46 - 06:48Poďme si ukázať ako pomozou elementRef
06:49 - 06:51dostať hodnotu dropdownu do komponentu
06:51 - 06:53Môžeme to spraviť napríklad takto:
07:14 - 07:17Vytvorme si funkciu setValue ktorá má ako parameter
07:17 - 07:20value a nastaví hodnotu našej premennej
07:20 - 07:23selectedOccupation v našom komponente
07:23 - 07:26v našom template potom našemu dropdownu nastavíme, že
07:26 - 07:29pri evente (change) sa má zavolať funkcia setValue
07:29 - 07:31ktorej hodnota bude referencia
07:31 - 07:33#mySelectBox.value
07:45 - 07:47Poďme si ukázať validáciu formuláru
07:47 - 07:51Naše formulárové prvky obaľme tagom
07:51 - 07:57pridajme mu referenciu #myForm="ngForm"
08:08 - 08:12Dostali sme chybu... a preto musíme každému našemu
08:13 - 08:14formulárovému prvku
08:14 - 08:16pridať aj parameter name
08:43 - 08:45Vytvorme si funkiu submitForm
08:45 - 08:48ktorá bude ako parameter data
08:48 - 08:51preberať hodnoty všetkých formulárových prvkov
08:58 - 09:01a do našeho formuláru pri evente ngSubmit
09:01 - 09:04zavoláme našu funkciu submitForm
09:04 - 09:07a pomocou referencie myForm.value
09:07 - 09:10do tejto funkcie odošleme všetky dáta našeho formuláru
09:29 - 09:32Do našeho templatu si pridajme hlášky ktoré nám povedia
09:32 - 09:34či je náš form validný alebo nevalidný
09:35 - 09:38referencia formulára myForm obsahuje aj property
09:38 - 09:41"valid" ktorá nám povie či je celý formulár
09:41 - 09:43validný alebo nie
10:04 - 10:07A ako môžete vidieť náš formulár je nevalidný
10:07 - 10:10pretože políčko surname obsahuje parameter required
10:10 - 10:14takže musí mať nastavenú nejakú hodnotu
10:14 - 10:15ak ju tam zadáme
10:15 - 10:17formulár bude vyhodnotený ako validný
10:18 - 10:21a zobrazí sa nám aj submit button kde sme použili
10:22 - 10:24*ngIf="myForm.valid"
10:25 - 10:29Tento typ formulárov sa nazýva Template-driven
10:29 - 10:31tým pádom kritériá validácie
10:31 - 10:33sú definované priamo v HTML kóde
10:33 - 10:37Required parameter určuje, že políčko musí mať minimálne nastavenú určitú hodnotu
10:37 - 10:40ale taktiež môžeme použiť napríklad
10:40 - 10:42parameter "pattern" ktorý určí
10:42 - 10:45zložitejšiu validáciu pre náš formulár... poďme si to vyskúšať
10:46 - 10:50Do našeho políčka surname pridajme parameter
10:50 - 10:51pattern
10:51 - 10:55a ako jeho hodnotu dajme regulárny výraz ktorý povie
10:55 - 10:57že toto políčko môže mať hodnotu
10:57 - 11:00malé a veĺké písmená abecedy
11:00 - 11:01a presne 5 znakov
11:16 - 11:20V dnešnej časti sme si ukázali základy práce s Template-driven formulármi
11:21 - 11:23Ako sa validujú jednotlivé formulárové prvky
11:24 - 11:25patterny pre validáciu
11:25 - 11:27a ako sa preberajú hodnoty
11:27 - 11:30vyplnené vo formulári do našich komponentov
11:30 - 11:34Týmto spôsobom viete vytvoriť jednoduché formuláre aj s validáciami
11:35 - 11:37ktoré sú definované priamo templatov
11:38 - 11:42Dúfam, že sa Vám dnešná časť páčila a uvidíme sa nabudúce

Template-driven formuláreZáklady práce s formulármi

V tejto časti si ukážeme základnú prácu s template-driven formulármi a jeho základnými validáciami.

Ukážkový formulár

Ukážeme si ako validovať formulár podľa HTML a ako preberať parametre cez elementRef.



<form #myForm="ngForm" (ngSubmit)="submitForm(myForm.value)">

  <h1 *ngIf="!myForm.valid" style="color: red; font-size: 40px;">Form is not valid</h1>
  <h1 *ngIf="myForm.valid" style="color: green; font-size: 40px;">Form is valid</h1>

  Name: <br /><input placeholder="Type name..." #myName type="text" [(ngModel)]="name" name="name"><br />
  Surname: <br /><input #mySurname type="text" pattern="[a-zA-Z]{5}" required [(ngModel)]="surname" name="surname" />

  <br /><br />Occupation: <br />
  <select #mySelectbox [(ngModel)]="selectedOccupation" name="selectedOccupation">
    <option value="">---</option>
    <option *ngFor="let item of occupation" [value]="item.title">
      {{item.title}}
    </option>
  </select>

  <button *ngIf="myForm.valid" type="submit">Submit form</button>

</form>


Stiahnite si súbory tohoto kurzu
    
#potrebujete node.js a globálne nainštalovaný @angular/cli
git clone https://github.com/streamer/angular_sk_kurz.git
cd angular_sk_kurz/14/myapp
npm install
ng serve
    




Diskusia