Cross Field Validation in Angular

hi guys welcome back in this video we are going to see how to perform cross field validation in forms first we will see what is crossfield validation and why do we need it and then i will show you a small demo on how to implement the cross validation in our sample angular application okay so what is crossfield validation across field validation is nothing but comparing the values of different fields in a form and then decide whether this combination of values is accepted or rejected okay now let's see a small use case of our sample application which requires a cross validation so this is a sample application where an admin can create a task set a due date and assign it to a particular user let's go ahead and create a sample uh task the title first task and i will assign it to myself purish and i want the due date to be on 18th 18th of january as minutes 9 o'clock and i want this task to be repeated weekly and it should be repeated until next month end which means uh february 28th so the idea is the first occurrence of the task will be created with the due date on 18th and it will repeat every monday until 28th of february so description is first task weekly and then hitting create in this page we can see a list of tasks that has been created as you can see here the first occurrence is on 18th of jan which is on monday and then the next one should be 25 25th of jan and the next one is first of february and so on and it is created the reconciliances has been created uh for every monday until 28th so 22nd is the last monday before 28th so that's how the recurring task will be created using a sample application now let's get to the point now the problem lies between the validation between the due date and repeat until date for example now the due date is 18th of january but our form allows us to pick a repeat until date before due date also for example 17th sorry so the 18th of jan is due date but still the form allows me to select a date which is before 18 which is a big big blunder and we want to prevent users from selecting a repeat date before due date which means the due date should not be greater than repeat until date and that's where we are going to use our crossfield validation let's dive into our code and create a custom validator so our task creation form lies in add task component and this our template and this our corresponding component class our form has been implemented using reactor approach therefore the validators will be directly assigned in the component class for example here we are initializing a form group and then a form control and we have ascended validates directly here in our case we want the cross field validator to be assigned to the complete form group therefore our new validator is going to be placed here let's go ahead and create a new validator if the name of validator be date validator dot directive dot ds export cost date validator the state value data is going to implement the interface called validator function validator function [Applause] and control as an argument [Applause] sorry i'm sorry equals allegation errors that's our lambda function so we are creating a date validator which implements an interface called validator function and it takes the angular control as an argument and returns the validation errors or null now let's get our controls first control is going to be due date [Applause] control dot get and the name should be same as the form control name that we have assigned here for due date so the form control name of due date field is due date so let's enter the due date here and then comes records recurrence type ctrl dot get see what what is the form control name of recurrence type field so that's recurrence time let's place reference type here and then the last field is repeat until [Applause] control dot get repeat until so now uh let's create our condition here first we have to check whether the controls exist so due date recurrence type repeat enter and now we have to check whether the recurrence type the chosen reference type is not none so recurrence type the value should not be and due date and now here we are going to check whether the due date value is greater than equal to repeat until that's it and if this condition is true then we are going to written a validation error saying you did greater than equal to repeat until date is true else they're going to say there are no errors written now that's it now we have created our date validator and let's see how to use the state validator in our component class and how to show an error in our template so here in our component class a validator should be included here so name of the validate is date value data this is our create form initialization let's add the same validator in our edit form also which is here so now that we have a validator in our component class let's include our error message under our due date and repeat until filled that's our due date field and here i'm going to include an mat error tag with a structural directive ngf saying show the error only if the task form has an error called due date greater than equal to repeat until so when this error occurs then the following message will be displayed due date is uh should not be [Applause] greater than or greater than or equal to repeat until date let's use the same matte error tag in our repeat until field also this is our repeat until field and so i am going to paste our matter here that's it so we have created a new validator and then we have included this validator in the component class because we have used reactor approach and then we have included our error message here let's see how it works so application is reloaded let's try to enter the fields first task we're sending it to myself and the due date let it be 18th monday i would like to repeat it daily until so i have chosen the due date as 18th let's see what happens if i pick uh repeat until day before 18 let's say i'm going i'm going to repeat under 16 which doesn't make any sense but i'm expecting an error message here under both the fields so i'm picking 16. oh it works finally we got the error message saying due date should not be greater than or equal to repeat until date also the create button is disabled that's how we could perform a crossfield validation using our custom validators and prevent the users from [Music] choosing a date before the due date thank you very much for watching see you guys on my next video

Channel: LumaBIT

Views: 424

Keywords: angular, angular tutorial, angular 8, angular reactive forms, angular forms, angular forms tutorial, cross field validation in angular, custom validator in angular, custom validation angular reactive form, custom validation in angular 8, custom validator, angular material, angular material form validation, angular material form, angular material form field validation, mat-error angular material, mat-error, cross field validation angular material, mat-form-field, validator angular

Id: Ql_GS5TJOeo

Length: 11min 44sec (704 seconds)

Published: Thu Jan 14 2021