نکته: همیشه به یاد داشته باشید :
برای ساخت یک FormGroup و FormControl ضمنی (implicitly) جدید از ngForm و ngModel استفاده می‌شود.
برای بایند کردن اطلاعات به یک FormGroup و FormControl آماده از formGroup و formControl استفاده می‌شود.
اضافه کردن اعتبارسنجی (Validation)
توجه دارید که کاربران یک وب سایت همواره به صورت منظم و دقیق فرم‌ها را پر نمی‌کنند. گاهی فراموش می‌کنند و گاهی می‌خواهند فرآیند را به سرعت طی کرده و روی دکمه‌ی ذخیره یا ثبت اطلاعات کلیک کنند. حال برای جلوگیری از این اتفاق باید اعتبارسنجی هایی روی فرم‌ها اعمال شود تا کاربر متناسب با پیام دریافتی بتواند اطلاعات را تکمیل کند. به همین منظور از validatorها استفاده خواهیم کرد.
اعتبارسنجی در انگولار ۲ توسط ماژول Validators فعال می‌شود که ساده‌ترین نوع اعتبارسنجی برابر Validators.required است که به کاربر می‌گوید پر کردن این فیلد الزامی‌ست. برای استفاده از اعتبارسنجی همواره باید دو موضوع را مد نظر داشته باشید:
انتساب یک اعتبارسنجی به شیء FormControl
چک کردن وضعیت اعتبارسنجی در View و اعمال اکشن برای آن
برای انتساب یک اعتبارسنج به یک شیء FormControl به عنوان دومین آرگومان آن را به سازنده‌ی پیشفرض کلاس FormControl ارسال می‌کنیم:
let control = new FormControl('sku', Validators.required);
1
let control = new FormControl('sku', Validators.required);
در مثال قبلی به دلیل استفاده از FormBuilderها ویرایش به صورت زیر انجام می‌پذیرد:
constructor(fb: FormBuilder){
this.myForm = fb.group({
'sku': ['', Validators.required]
});
this.sku = this.myForm.controls['sku'];
}
1
2
3
4
5
6
constructor(fb: FormBuilder){
this.myForm = fb.group({
'sku': ['', Validators.required]
});
this.sku = this.myForm.controls['sku'];
}
حال باید اعتبارسنجی را در view و قالب نرم‌افزار خود انجام دهید. منعطف‌ترین راه اضافه کردن یک نمونه متغییر در کلاس تعریف شده کامپوننت شماست. در اینجا برای sku تغییرات را ارائه خواهیم داد:
import { Component } from '@angular/core';
import {FormGroup, FormBuilder, Validators, AbstractControl} from "@angular/forms";
@Component({
selector: 'demo-form-sku',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
sku: AbstractControl;
constructor(fb: FormBuilder){
this.myForm = fb.group({
'sku': ['', Validators.required]
});
}
onSubmit(form: any): void{
console.log('کد محصول ثبت شده برابر است با:', form);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component } from '@angular/core';
import {FormGroup, FormBuilder, Validators, AbstractControl} from "@angular/forms";
@Component({
selector: 'demo-form-sku',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
sku: AbstractControl;
constructor(fb: FormBuilder){
this.myForm = fb.group({
'sku': ['', Validators.required]
});
}
onSubmit(form: any): void{
console.log('کد محصول ثبت شده برابر است با:', form);
}
}
به نکات زیر توجه کنید:
sku: AbstractControl در ابتدای کلاس تعریف شد
this.sku پس از ساخت myForm توسط FormBuilder انتساب داده شد
این موضوع بسیار ارزشمند است زیرا هرجا درون View خود می‌توانیم به sku رفرنس بدهیم. حال با اعتبارسنجی sku شروع می‌کنیم.
پیام‌های اعتبارسنجی فرم
در این بخش قصد داریم اعتبارسنجی یک فیلد را مورد بررسی قرار داده و در صورت وجود هرگونه خطا پیام مشخصی ارائه شود. بنابراین مجموعه‌ی کد زیر را به دستورات خود در HTML اضافه می‌کنیم:
کد محصول وارد شده نامتعبر است
1
کد محصول وارد شده نامتعبر است
توجه داشته باشید که myForm یک FormGroup است و یک FormGroup مورد تایید است اگر و فقط اگر تمام فرزندان FormControls آن مورد تایید باشد.
پیام‌های اعتبارسنجی فیلدها
همچنین می‌توانید اعتبارسنجی را برای یک فیلد مشخص انجام دهید درصورتیکه FormControl آن فیلد معتبر نباشد:
کد محصول وارد شده نامتعبر است
وارد کردن کد محصول ضروری است
1
2
کد محصول وارد شده نامتعبر است
وارد کردن کد محصول ضروری است
اعتبارسنجی برای تغییر رنگ فیلدها
برای تغییر رنگ فیلدهایی که اعتبارسنجی آنها با مشکل مواجه شده است می‌توانید از کد زیر استفاده کنید. البته به دلیل استفاده از فریم ورک بوت‌استراپ برای تغییر رنگ فیلدها از کلاس has-error بهره می‌بریم.
ارسال نظر برای این مطلب
آمار سایت
کل مطالب : 346
کل نظرات : 0
افراد آنلاین : 1
تعداد اعضا : 0
آی پی امروز : 16
آی پی دیروز : 17
بازدید امروز : 90
باردید دیروز : 21
گوگل امروز : 2
گوگل دیروز : 5
بازدید هفته : 164
بازدید ماه : 529
بازدید سال : 7,038
بازدید کلی : 35,273
