از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
Angular Form Validation یکی از رایج ترین ویژگی ها در هر برنامه وب، ارائه فرمی به کاربران برای وارد کردن برخی از داده ها است. شما روزانه از فرم ها برای ورود به سیستم، ثبت نام، ثبت سفارش و غیره استفاده می کنید. پردازش ورودی های کاربر قبل از اعتبارسنجی می تواند عواقب جدی داشته باشد. ممکن است در نهایت داده های نامعتبر مانند یک نادرست را ذخیره کنید…
سرفصلهای مطلب
معرفی
یکی از رایج ترین ویژگی ها در هر برنامه وب، ارائه فرمی به کاربران برای وارد کردن برخی از داده ها است. شما روزانه از فرم ها برای ورود، ثبت نام، ثبت سفارش و غیره استفاده می کنید.
پردازش ورودی های کاربر قبل از اعتبارسنجی می تواند عواقب جدی داشته باشد. ممکن است در نهایت داده های نامعتبر مانند تاریخ، ایمیل، سن نادرست و غیره را ذخیره کنید. همچنین ممکن است به دلیل حملاتی مانند یک مشکل امنیتی باشد. اسکریپت بین سایتی (XSS).
روش سنتی اعتبارسنجی فرم های HTML با استفاده از جاوا اسکریپت یا JQuery است. متأسفانه، این رویکرد یک دسته کد را تضمین می کند.
زاویه ایبه عنوان یک فریمورک تمام عیار، پشتیبانی عالی را برای اعتبارسنجی ورودی های کاربر و نمایش پیام های اعتبار سنجی ارائه کرده است. دارای تعداد زیادی اعتبار سنجی داخلی است که می توانید از آنها استفاده کنید یا حتی می توانید اعتبار سنجی های سفارشی خود را بنویسید.
فرم ها در Angular
فرم Angular یک فرم معمولی HTML با چند ویژگی اضافی است. برای هر فیلد (ورودی، رادیو، انتخاب و غیره) در فرم، به یک شی از the نیاز داریم FormControl کلاس را FormControl شی اطلاعاتی در مورد آن فیلد می دهد. آن value، اگر مقدار باشد valid، و اگر معتبر نیست چه اعتباری دارد errors، و غیره.
همچنین وضعیت میدانی مانند touched، untouched، dirty، pristine، و غیره.
به همین ترتیب، الف FormGroup مجموعه ای از FormControl اشیاء. هر فرم Angular حداقل یکی دارد FormGroup. ممکن است تصمیم بگیرید چندتایی داشته باشید FormGroupدر موارد استفاده مانند جدا کردن بخش های رسیدگی به جزئیات شخصی و جزئیات حرفه ای فرم ثبت نام کاربر.
تمام خواص الف FormGroup (valid، errorو غیره) نیز در دسترس هستند FormControl. به عنوان مثال، valid دارایی a FormControl بر خواهد گشت true اگر همه FormControl مصادیق معتبر هستند
بنابراین برای افزودن اعتبار به فرم Angular به دو چیز نیاز داریم:
- حداقل یکی
FormGroupشیء برای فرم - آ
FormControlشیء برای هر فیلد در فرم
وجود دارد دو راه متفاوت که توسط این کنترل اشیاء می توان ایجاد کرد. ما می توانیم برخی را ارائه دهیم بخشنامه ها در قالب از فرم و Angular می تواند چنین ایجاد کند کنترل ها زیر کاپوت برای ما فرم هایی که از این طریق ایجاد می شوند نامیده می شوند فرم های قالب محور.
اگر موارد استفاده خاصی داریم و می‌خواهیم کنترل بیشتری روی فرم داشته باشیم، می‌توانیم به صراحت چنین مواردی را ایجاد کنیم کنترل اشیاء. فرم های ایجاد شده به این روش نامیده می شوند اشکال واکنشی.
فرم های الگو محور
در فرم های قالب محور، ما عبارت را اعمال می کنیم ngModel دستورالعمل برای هر فیلد در الگو. Angular ایجاد می کند FormControl برای هر یک از این فیلدها در زیر هود قرار دهید و آن را با فیلد مربوطه مرتبط کنید:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
ngModel name="name">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
ngModel name="username">
</div>
توجه داشته باشید: با ngModel، لازم است یکی از آنها را ارائه دهد name را مشخص یا تعریف کنید FormControl به عنوان “مستقل” در ngModelOptions، در غیر این صورت Angular خطا می دهد.
همچنین در app.module.ts شما باید اضافه کنید FormsModule به مجموعه واردات:
import { FormsModule } from '@angular/forms';
// ...some other imports
imports: (
//...some other imports
FormsModule
)
اعتبار سنجی در فرم های الگو محور
Angular تعدادی را ارائه کرده است اعتبار سنجی داخلی برای تایید موارد استفاده رایج به منظور استفاده از اعتبار سنجی داخلی، باید ویژگی های اعتبار سنجی را برای هر فیلد فرمی که می خواهید اعتبار سنجی اعمال کنید، اعمال کنید. این ویژگی‌های اعتبارسنجی مانند ویژگی‌های اعتبارسنجی معمولی HTML5 هستند required، minlength، maxlengthو غیره. در زیر هود، Angular دستورالعمل هایی را برای تطبیق این ویژگی ها با توابع اعتبارسنجی تعریف شده در چارچوب Angular ارائه کرده است.
هر زمان که یک FormControlبا تغییر مقدار، Angular لیستی از خطاهای اعتبار سنجی را با اجرای اعتبارسنجی ایجاد می کند. اگر لیست خالی باشد به این معنی است که یک وضعیت معتبر است، در غیر این صورت، یک وضعیت نامعتبر است.
فرض کنید می خواهیم اعتبار سنجی های زیر را در آن قرار دهیم:
- همانطور که زمینه ها نام و نام کاربری را داشته باشند
requiredاگر این فیلد خالی بماند، می خواهیم یک پیام اعتبار سنجی نمایش دهیم. - را نام فیلد باید مقدار آن را داشته باشد
minlegthوmaxlengthباید به ترتیب 2 و 30 کاراکتر باشد. - اگر نام کاربری دارای فاصله است، یک پیام نام کاربری نامعتبر نمایش دهید.
برای هر فرم-کنترلی که می‌خواهیم اعتبارسنجی را در آن اضافه کنیم، باید ویژگی‌های اعتبارسنجی مناسب و export ngModel به یک محلی متغیر قالب:
<input type="text" class="form-control" id="name"
required maxlength="30" minlength="2"
ngModel name="name" #name="ngModel">
در مثال بالا، ما از اعتبار سنجی داخلی زیر استفاده کرده ایم – required، minlength، و maxlength.
می توانیم از متغیر قالب استفاده کنیم name در الگو برای بررسی وضعیت های اعتبارسنجی اعتبار سنجی های استفاده شده:
<div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name cannot be more than 30 characters long.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 2 characters long.
</div>
</div>
همانطور که از یک دستور شرطی برای ارائه اولین مورد استفاده کرده ایم div، فقط در صورتی نمایش داده می شود که وضعیت اعتبارسنجی داخلی باشد invalid. ما در ابتدای بخش توضیح داده‌ایم که وضعیت چگونه تعیین می‌شود valid یا invalid.
به همین ترتیب، درونی div's تنها در صورتی نمایش داده می شود که متغیر الگو باشد name دارایی است errors و errors ملک دارای یکی از ویژگی های زیر است – required، minlength و maxlength و ارزش ملک است true. قبلاً در مورد روش اتصال متغیر الگو به آن بحث کرده ایم ngModel دستورالعمل و هر بار که تغییری در کنترل فرم ایجاد می شود این ویژگی ها را دریافت می کند و پس از Angular اعتبارسنجی آن فیلد را اجرا می کند.
توجه داشته باشید: بررسی مهم است dirty و touched بیان می کند، در غیر این صورت پیام خطا در اولین بار نمایش داده می شود page بارگذاری شده است، که برای تجربه کاربر بد است. ما نیاز داریم که پیام اعتبارسنجی در یکی از شرایط زیر نمایش داده شود:
- کاربر مقداری مقدار را تغییر می دهد، یعنی فیلد کثیف است (
formControlObject.dirty) - کاربر از برگه یا کلیک برای تغییر فوکوس به عنصر دیگری استفاده می کند، یعنی فیلد لمس شده است (
formControlObject.touched)
اگر می‌خواهید فهرست کاملی از اعتبارسنجی‌های داخلی Angular را ارجاع دهید، می‌توانید موارد زیر را دنبال کنید Validators API.
نوشتن اعتبارسنجی سفارشی
گاهی اوقات اعتباردهنده های داخلی ممکن است مورد استفاده دقیق شما را پوشش ندهند. در این مورد، ممکن است نیاز داشته باشید که عملکرد اعتبارسنجی سفارشی خود را ایجاد کنید.
یک تابع اعتبار سنجی، را پیاده سازی می کند ValidatorFn رابط، به این معنی که باید دارای امضا باشد:
interface ValidatorFn {
(control: AbstractControl): ValidationErrors | null
}
را ValidationErrors باید شیئی باشد که دارای یک یا چند جفت کلید-مقدار باشد:
type ValidationErrors = {
(key: string): any;
};
کلید باید یک رشته باشد و برای نشان دادن نوع خطای اعتبارسنجی مانند استفاده می شود invalidEmail، requiredو غیره. مقدار می تواند هر چیزی باشد و برای ارائه اطلاعات بیشتر در مورد خطای اعتبارسنجی استفاده می شود.
برای مثال بالا، می‌خواهیم یک تابع اعتبارسنجی سفارشی بنویسیم که در صورت عدم وجود فاصله در آن، اعتبارسنجی می‌کند نام کاربری.
در حالی که از نظر فنی می‌توانیم این تابع را در هر جایی از برنامه بنویسیم، همیشه تمرین خوبی است که همه توابع اعتبارسنجی مرتبط را در یک کلاس جداگانه قرار دهیم:
import { ValidationErrors, AbstractControl } from '@angular/forms';
export class UserRegistrationFormValidators {
static usernameShouldBeValid(control: AbstractControl): ValidationErrors | null {
if ((control.value as string).indexOf(' ') >= 0) {
return { shouldNotHaveSpaces: true }
}
// If there is no validation failure, return null
return null;
}
}
توجه داشته باشید: در این مثال برگشته ایم true به عنوان مقدار کلید shouldNotHaveSpaces زیرا نیازی به ارائه جزئیات نداریم. در برخی موارد ممکن است نیاز به ارائه جزئیات داشته باشید، به عنوان مثال:
return { maxlengthExceeded: {
maxLength: 20,
actual: control.value.length
}
}
در مرحله بعد، می توانیم از این تابع اعتبارسنجی استفاده کنیم UserRegistrationFormValidators.usernameShouldBeValid برای username فرم-کنترل در فرم مبتنی بر الگوی ما:
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
required
UserRegistrationFormValidators.usernameShouldBeValid
((ngModel))="person.username" name="username">
</div>
فرم های واکنشی
در اشکال واکنشی ایجاد می کنیم FormControl اشیاء به صراحت در جزء از آن الگو در اینجا فرم معمولی HTML بدون هیچ گونه وجود دارد ngModel دستورالعمل یا تاییدیه ها:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
فرض کنید می خواهیم فرم الگو محور خود را از مثال قبلی به یک فرم واکنشی تبدیل کنیم.
برای این، ابتدا باید به صراحت ایجاد کنیم FormGroup و FormControls برای هر زمینه در جزء از قالب:
form = new FormGroup({
'name': new FormControl(),
'username': new FormControl(),
})
توجه داشته باشید: همانطور که قبلاً گفته شد، یک فرم می تواند بیش از یک داشته باشد FormGroup. در این حالت می توانیم ساختار تودرتو داشته باشیم:
registrationForm = new FormGroup({
'personalDetailsForm': new FormGroup({
'name': new FormControl()
})
})
می توانید در مورد بیشتر بخوانید FormGroup در مستندات زاویه ای.
اجازه دهید توجه شما را به مورد استفاده ما برگردانم.
بعد، ما باید اینها را مرتبط کنیم FormControl اشیاء به فیلدها در فرم HTML.
<form (formGroup)="registrationForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
(formControlName)="name">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
(formControlName)="username">
</div>
<form>
در اینجا ما آن را اعمال کردیم formGroup بخشنامه و مرتبط آن با FormGroup هدف – شی registrationForm که ما در آن ایجاد کردیم جزء. ما همچنین مرتبط formControlName بخشنامه با مربوطه FormControl اشیاء name و username.
توجه داشته باشید: بخشنامه های ساخت اشکال واکنشی در تعریف شده اند ReactiveFormsModule. بنابراین اگر با خطایی مانند:
Can't bind to formGroup
… سپس باید بررسی کنید که آیا آن را وارد کرده اید یا خیر ReactiveFormsModule در ماژول اصلی شما app.module.ts.
اعتبار سنجی در فرم های واکنشی
در اشکال واکنشی، ما از آن عبور نمی کنیم ngModel دستورالعمل و همچنین از ویژگی های اعتبار سنجی HTML5 استفاده نمی کنیم. ما در حین ایجاد اشیاء، اعتبار سنجی ها را مشخص می کنیم FormControl در خود جزء
اینم امضای FormControl کلاس:
class FormControl extends AbstractControl {
constructor(formState: any = null, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn(), asyncValidator?: AsyncValidatorFn | AsyncValidatorFn())
// ...
}
همانطور که می بینیم اولین پارامتر حالت اولیه کنترل است که می توان آن را خالی نگه داشت ''. پارامتر دوم است ValidatorFn.
برای افزودن توابع اعتبارسنجی داخلی برای a FormControl ما می توانیم آن را مناسب پاس کنیم ValidatorFn. برای مثال زیر از اعتبار سنجی داخلی زیر استفاده کرده ایم required، minLength، و maxLength – :
registrationForm = new FormGroup({
'name': new FormControl('Enter your name', (
Validators.required,
Validators.minLength(2),
Validators.maxLength(30)
)),
'username': new FormControl('', Validators.required),
})
توجه داشته باشید: شما نیاز دارید import Validators در جزء
لطفاً توجه داشته باشید، برخلاف فرم‌های الگو محور، ما از آن استفاده نمی‌کنیم ویژگی های اعتبارسنجی. ما از مربوطه استفاده می کنیم ValidatorFn پسندیدن Validators.required، Validators.minLength(2) و غیره. ویرایشگر کد شما ممکن است برای همه به صورت خودکار تکمیل شود ValidatorFn لحظه ای که تایپ می کنید Validators به دنبال آن یک نقطه ..
ما می توانیم به عقب برگردیم قالب و پیام های اعتبار سنجی بنویسید:
<form (formGroup)="registrationForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
(formControlName)="name">
<div *ngIf="registrationForm.get('name').invalid && (registrationForm.get('name').dirty || registrationForm.get('name').touched)"
class="alert alert-danger">
<div *ngIf="registrationForm.get('name').errors.required">
Name is required.
</div>
<div *ngIf="registrationForm.get('name').errors.minlength">
Name cannot be more than 30 characters long.
</div>
<div *ngIf="registrationForm.get('name').errors.minlength">
Name must be at least 2 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
(formControlName)="username">
</div>
<form>
اعتبار سنجی سفارشی برای فرم های واکنشی
باید بنویسیم عملکرد اعتبارسنجی سفارشی به همان روشی که ما آن را برای قالب محور بخش فرم ما می توانیم از همان تابع اعتبارسنجی سفارشی استفاده کنیم UserRegistrationFormValidators.usernameShouldBeValid در جزء برای فرم واکنشی:
registrationForm = new FormGroup({
'name': new FormControl('Enter your name', (
Validators.required,
Validators.minLength(2),
Validators.maxLength(30)
)),
'username': new FormControl('', (
Validators.required,
UserRegistrationFormValidators.usernameShouldBeValid
)),
})
نتیجه
در این آموزش، ما دو روش مختلف برای مدیریت ورودی‌های کاربر – فرم‌های الگو محور و واکنش‌پذیر را بررسی کردیم. ما یاد گرفتیم که چگونه اعتبار سنجی را قرار دهیم روی هر دو نوع فرم و در نهایت، ما تابع اعتبارسنجی سفارشی خود را نیز نوشتیم و آن را با اعتباردهنده های داخلی اضافه کردیم.
همانطور که می بینیم Angular پشتیبانی بسیار خوبی از فرم ها دارد و برخی از ویژگی های مفید زیر را برای اعتبارسنجی فرم ها ارائه می دهد. ارائه تک تک ویژگی ها با فرم های Angular خارج از محدوده این آموزش است. شما ممکن است بخوانید مستندات زاویه ای برای اطلاعات کامل
منتشر شده در 1403-01-25 01:33:03
