Template Driven Forms
Template Driven Forms
მნიშვნელოვანი დირექტივები
template-driven ფორმები ეყრდნობიან FormsModule
-ში არსებულ შემდეგ დირექტივებს:
NgModel
- იგი ათანხმებს ჰოსტ ფორმის ელემენში შეცვლილ მნიშვნელობებს დატა მოდელთან, რაც საშუალებას გვაძლევს, რომ ვირეაგიროთ შეყვანილ ინფორმაციაზე.NgForm
- ქმნის ზედა დონისFormGroup
-ის ინსტანციას და მას<form>
ელემენტს აბამს, რათა თვალყური ადევნოს გაერთიანებული ფორმის მნიშვნელობასა და ვალიდაციის სტატუსს. როგორც კი ჩვენFormsModule
-ს ვაიმპორტებთ, ეს დირექტივი ავტომატურად აქტიურდება ყველა<form>
ელემენტზე.NgModelGroup
- ქმნის და აბამსFormGroup
-ის ინსტანციას DOM ელემენტს.
აუცილებელია FormsModule
-ის დაიმპორტება საჭირო კომპონენტში (ან მოდულში), რათა ამ დირექტივებზე წვდომა გვქონდეს.
ფორმის აწყობა
ვთქვათ, გვინდა ფორმის აწყობა, სადაც ვეფხისტყაოსნის გმირებს დარეგისტრირება შეეძლებათ ახალი თავგადასავლის დასაწყებად, და სადაც ასევე შეძლებენ თანამგზავრი მეგობრის არჩევას.
მარტივი ფორმა
შევქმნათ კომპონენტი HeroFormComponent და მის თემფლეითში ავაგოთ მარტივი ფორმა:
<form>
<h1>Start your journey</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" />
</div>
<div class="form-group">
<label for="friend">Friend</label>
<select id="friend" name="friend">
<option *ngFor="let friend of friends" [value]="friend">
{{ friend }}
</option>
</select>
</div>
</form>
ეს სტანდარტული ფორმის მარკაპია, უბრალოდ select
-ში ვიყენებთ
NgFor
დირექტივს რათა ასარჩევი მეგობრების სია გამოვსახოთ,
მათი მნიშვნელობები მივანიჭოთ value თვისებაზე და ასევე ეს
მნიშვნელობა გამოვსახოთ ინტერპოლაციით.
friends
ასე გამოიყურება კომპონენტის კლასი:
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-hero-form",
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: "./hero-form.component.html",
styleUrl: "./hero-form.component.css",
})
export class HeroFormComponent {
friends = ["Tariel", "Avtandil", "Nuradin-Pridon"];
heroData = {
name: "",
email: "",
friend: "",
};
submitted = false;
onSubmit() {
this.submitted = true;
}
}
friends
-ში ვინახავთ მეგობრების მასივს. heroData იქნება ის
პირადი ინფორმაციის ობიექტი, სადაც მომხმარებლის შეყვანილ მონაცემებს
შევინახავთ. ეს თვისებები თავიდან ცარიელია.
აქვე გვექნება submitted
, რომელიც იმას განსაზღვრავს submit ღილაკზე
დავაჭირეთ თუ არა. სწორედ ღილაკზე დაჭერისას უნდა გააქტიურდეს onSubmit
მეთოდი.
NgModel
-ის საშუალებით ფორმაში შეყვანილი მონაცემები შეგვიძლია შევინახოთ
heroData
-ს თვისებებში:
<form (ngSubmit)="onSubmit()">
<h1>Start your journey</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" [(ngModel)]="heroData.name" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" [(ngModel)]="heroData.email" />
<span *ngIf="emailCtrl.invalid && !emailCtrl.pristine"
>Email is required!</span
>
</div>
<div class="form-group">
<label for="friend">Friend</label>
<select id="friend" name="friend" [(ngModel)]="heroData.friend">
<option *ngFor="let friend of friends" [value]="friend">
{{ friend }}
</option>
</select>
<span *ngIf="friendCtrl.invalid">You shouldn't go alone!</span>
</div>
<button>Submit</button>
</form>
<div *ngIf="submitted">
<h3>OUTPUT:</h3>
<div>{{ heroData | json }}</div>
</div>
ახლა ღილაკზე დაჭერისას უნდა გამოჩნდეს შედეგი, რაც ადასტურებს იმას, რომ შეყვანილ მონაცემებს სწორად ვინახავთ. იდეაში ღილაკზე დაჭერის შემდეგ ჩვენ რაიმე HTTP მოთხოვნა უნდ აგავაგზავნოთ, თუმცა ახლა შედეგს უბრალოდ თემფლეითში გამოვსახავთ.
ვალიდაცია
საჭიროა, რომ ღილაკზე დაჭერა იქამდე არ იყოს შესაძლებელი, სანამ ყველა ველი სწორად არ შეივსება. ამისთვის ფორმის კონტროლებს უნდა ჩავწვდეთ და შევამოწმოთ მათი ვალიდურობა. ეს შესაძლებელია ლოკალური ცვლადებით და ვალიდატორებით:
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<h1>Start your journey</h1>
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
id="name"
name="name"
[(ngModel)]="heroData.name"
required
#nameCtrl="ngModel"
/>
<span *ngIf="nameCtrl.invalid && !nameCtrl.pristine"
>Name is required!</span
>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
[(ngModel)]="heroData.email"
required
email
#emailCtrl="ngModel"
/>
<span *ngIf="emailCtrl.invalid && !emailCtrl.pristine"
>Email is required!</span
>
</div>
<div class="form-group">
<label for="friend">Friend</label>
<select
id="friend"
name="friend"
[(ngModel)]="heroData.friend"
required
#friendCtrl="ngModel"
>
<option *ngFor="let friend of friends" [value]="friend">
{{ friend }}
</option>
</select>
<span *ngIf="friendCtrl.invalid">You shouldn't go alone!</span>
</div>
<button [disabled]="heroForm.invalid">Submit</button>
</form>
<div *ngIf="submitted">
<h3>OUTPUT:</h3>
<div>{{ heroData | json }}</div>
</div>
მივყვეთ ზემოდან ქვემოთ. ჩვენ ლოკალურ ცვლადს ვქმნით #-ით - heroForm
, რომელსაც
ngForm
დირექტივს ვუტოლებთ. ასე თემფლეითში იქმნება ცვლადი, რომელიც FormGroup
-ის
ინსტანციას ინახავს. ღილაკს სწორედ ამ ცვლადში არსებული invalid
თვისების მიხედვით
ვთიშავთ. ფორმის ჯგუფი არავალიდურია მაშინ, თუ მასში ერთი კონტროლი მაინც არ არის ვალიდური.
თითოეულ ფორმის ელემენტს მივეცით ატრიბუტი required
. ამის მიხედვით NgModel
ადგენს,
რომ თუ ფორმა ცარიელია, მაშინ ის არავალიდურია და სათანადო კონტროლს ანიჭებს invalid
თვისებაზე true-ს, ხოლო valid
თვისებაზე false-ს. ამ თვისებებს მსგავსი პრინციპით ვიღებთ:
ლოკალურ ცვლადს ვქმნით და მას ვუტოლებთ ngModel
-ს. ასე ჩვენ ცვლადებში FormControl
-ის
ისნტანციას ვინახავთ, რომელსაც გარკვეული თვისებები გააჩნია. თუ კონტროლი არავალიდურია, ჩვენ
გვინდა რომ თითოეული ველის ქვეშ ამის შესახებ მინიშნება გამოჩნდეს. მაგრამ ეს მინიშნება არ გვინდა,
რომ თავიდანვე ხილვადი იყოს, ფორმა კი თავიდან არავალიდურია. სწორედ ამიტომ ასევე ვიყენებთ
pristine
ცვლადს. ეს ნიშნავს, რომ მომხმარებელს ჯერ არეფერი შეუყვანია ველში. ჩვენ
მინიშნება მაშინ გვინდა გამოვაჩინოთ, როცა კონტროლი არავალიდურია და მასში ცვლილება
უკვე შეტანილი იყო. pristine
-ის საპირისპირო თვისებაც არსებობს -- dirty
, რომელიც შეგვიძლია
გამოვიყენოთ ამ პირველის ნეგაციის მაგივრად.
იმელის ველზე email ატრიბუტის მინიჭება ngModel
-ს ანიშნებს, რომ ამ ველში მეილის პატერნი უნდა იყოს,
და სანამ ეს პატერნი არ დაფიქსირდება, ფორმა არავალიდური იქნება.
შეჯამება
ამ თავში ჩვენ გამოვიყენეთ template-driven ფორმები მარტივი ფორმის შესაქმნელად, რომელსაც გააჩნია ვალიდაცია: იმის მიხედვით, არის თუ არა შევსებული ველი, ჩვენ ღილაკს ვაუქმებთ, ან ვაჩვენებთ მინიშნებებს. ჩვენ ასევე იმასაც ვაქცევთ ყურადღებას, რომ მინიშნება ტექსტის შეყვანის მცდელობის შემდეგ უნდა გამოჩნდეს. ამ ყველაფერს დირექტივებით და ლოკალური ცვლადებით ვაკეთებთ თემფლეითში, რაც უფრო მოხერხებულია პატარა ფორმებისთვის, მაგრამ ზოგჯერ ეს საკმარისი არ არის.