דלג לתוכן הראשי

Forms custom validation

כשעושים ולידציה לשדה בטופס מקבלים קוד שאומר האם הולידציה עברה או נכשלה. הקוד הזה נמצא בתוך fieldName.errors.

כל ולידציה היא פונקציה שמקבלת control: AbstractControl ומחזירה ValidationErrors | null.

נניח שאנחנו רוצים לעשות ולידציה לשם משתמש כך שהוא מחרוזת ללא רווחים.

בתוך הקומפוננטה נשים את הפונקציה של הולידציה.

comp.ts
noSpaceAllowed(control: FormControl){
const value = control.value;

if(value != null && value.indexOf(' ') != -1){
return {noSpaceAllowed: true}
}
return null;
}

בהגדרת שדות הטופס, נחבר את פונקצית הולידציה.

comp.ts
firstName: ['', [Validators.required, this.noSpaceAllowed]],

get firstName() {
return this.contactForm.get('presonalDetails.firstName');
}

בטמפלט נשתמש בשדה שהגדרנו ונבדוק את הערך שהפונקציה החזירה על מנת לאתר שגיאות.

comp.html
<span *ngIf="firstName?.errors?.['noSpaceAllowed']">First name is required</span>

Async validator

אנחנו צריכים Async validator כששולחים http request. ולידטור אסינכרוני מחזיר promise או observable.

נניח שאנחנו רוצים לקבל מיילים רק עם סיומת מסויימת ויש לנו ב-DB רשימה של מיילים מותרים.

נגדיר את הפונקציה של הולידציה בתוך קובץ ה-class.

comp.ts
emailNotAllowed(control: FormControl): Promise<any> | Observable<any> {
const response = new Promise((resolve, reject) => {
// Timer to assimulate async action
setTimeout(() => {
if (control.value !== 'service@taxes.gov.il') {
resolve({ emailNotAllowed: true });
} else {
resolve(null);
}
}, 5000);
});
return response;
}

הקריאה לולידטור תהיה ברשימה נפרדת מזו של הולידטורים הרגילים.

comp.ts
email: ['', [Validators.required, Validators.email], this.emailNotAllowed]

Value & status change events

אירוע ValueChange יקרה אם יהיה שינוי בערך של FormCOntrol, FormGroup או FormArray. אנחנו נרשמים לקבל את השינויים בפונקציה OnInit.

comp.ts
this.contactForm.get('message')?.valueChanges.subscribe(value => {
console.log(value);
})

אפשר גם להאזין לשינויים שיש ב-form עצמו.

comp.ts
this.contactForm.valueChanges.subscribe(value => {
console.log(value);
})

לכל form control יש סטטוס. אם שדה אחד הוא invalid, כל הטופס יהיה invalid. כשיש בדיקה של ולידציה, האירוע StatusChanges עולה.

אפשר לחבר את הערכים שמקבלים למשתנים ב-class ולהשתמש בהם.

comp.ts
this.contactForm.statusChanges.subscribe(value => {
console.log(value);
})

Setting values to the form

אפשר לחבר ערכים לשדות של הטופס. המבנה של הפונקציה חייב להתאים למבנה של הטופס.

comp.ts
this.contactForm = this.formBuilder.group({
presonalDetails: this.formBuilder.group({
firstName: ['', [Validators.required, this.noSpaceAllowed]],
lastName: '',
email: ['', [Validators.required, Validators.email], this.emailNotAllowed,],
}),
message: '',
subjects: new FormArray([new FormControl(null)]),
});

שימוש בפונקציה setValue:

comp.ts
this.contactForm.setValue({
presonalDetails: {
firstName: '',
lastName: '',
email: ''
},
message: '',
subjects: []
})

שימוש בפונקציה patchValue להשמה חלקית של הערכים:

comp.ts
this.contactForm.patchValue({
personalDetails: {
firstName: ''
}
})

אפשר לאפס טופס:

comp.ts
this.contactForm.reset({
presonalDetails: {
firstName: '',
lastName: '',
email: ''
},
message: 'Write your message',
subjects: []
})