Angular - Reactive Forms Tutorial

when you google for angular form tutorials you most likely encounter two different methods the template-driven and the reactive approach in the template-driven approach you have a two-way binding between the html form and the data model you write everything form-related in the html templates such as validators in the reactive approach you write everything form related in the component code in the component class you define a form group assigned form elements with default values and validators you are more flexible you can write your own complex validation scenarios more easily and overall unit testing is easier in this video we built a simple wizard editor using the angular reactive form approach we will write our own validators and we will also use angular form group builder to make the code more compact at first we create a form with standard html input fields the first field is a standard input text field for the magician name we will validate the user input later with standard angular validators the second input field is a date picker for the birthday of the magician we will write our own validator for this input also we create a drop down select menu for the magician element the options are provided by the component class we can only choose from elements such as fireeyes and so on now we add a slider for the intelligence attribute we define a range between 50 and 100. we also add a second slider for the wisdom attribute also with the same range with these sliders we can customize the attributes of our magician we will add complex validation where every magic element requires a certain minimum value for a certain attribute at last we add a submit button this button will be disabled if the input values are invalid in the end if the user presses submit we will retrieve the form values for further processing now we have the setup for an angular form group we need to bind the form group and its form controls to the input fields and add some validators at first we must make sure that our app module imports the reactive form module from the angular forms module then let's inject the form builder in the constructor of our component we define a component variable of type form group in the constructor we use the form builder to create a new form group and assign it to the variable the builder requires a form controls configuration here we define the form controls which get binded to each input field we use the builder to create and add the form control for the name input with an empty string as the initial value let's do the same for the control with the name birthday this one will be binded to the birthday input field also we create a control with the name element for the element drop-down menu which also has an empty string as an initial value then we add the controls with the name intelligence and wisdom each one with the same initial value 50. we should also define a public method which gets called when the submit button has been pressed here we can consume the form group values for example printing to the console in the html template we must bind the form group to the form html tag we do that by setting the form group variable name to the input with the name form group on the form tag also on the form tag we tell that on form submit our public submit function gets called now we must go through all input fields and set the form control name attribute the name input field gets the form control with the key name the birthday input field gets the control with the key birthday now do the same thing for the inputs element intelligence and wisdom the html input fields are now binded to the form group and the corresponding form controls we can verify that by setting some inputs submitting and check in the console that our inputs are being displayed now move on to the default validators for each form control which we create with the form builder we can add an array of validators for example at the name form control we can add the default validators required min length and max length and even a regular expression pattern in order to display proper validation error messages to the user the html template must have access to every form control and check if validation errors exist for that i create a convenience function to get a form control by the key then in the html template at the name input field i create a div using the ngif directive the condition for the if statement is that the form control has an error i call the convenience function to get the name form control then i say dot error and then dot the validation error identifier for example required so if the validation for required has failed i render a proper error message the same goes for the min length max length and the pattern we should disable the submit button if any validation has failed i can access the form group and check if it is invalid having proper error messages we can direct the user to correct the input we also add the valid data for required fields to the birthday and element form controls and also display proper validation error messages we want to validate the age of the magician and therefore we create a custom validator for that we define a function which has an abstract control as an input and returns either a validation error or null if the validator returns null there is no error if the validator function returns a validation error object there is an error use the abstract control value to get the user input i use it to create a date instance and to calculate the magician age if the h is below a minimum i return the validation error with the custom defined arrow key invalid h now i can add this function as a validator to the birthday form control also we can display an error message for that we must use the custom defined arrow key to test if this validation error has occurred let's verify that by setting an invalid birthday date at last i would like to validate the combination of the magician element at the intelligence and wisdom attributes for that i add a custom validator function as a validator on group level to the form builder call this validator function has the same signature as the previous custom validator an abstract control is the input this will be the whole form group it must also return either a validation error or null i can access all form control values by calling the get function on the input with the corresponding form control key this way i can get the magician element the intelligence and the wisdom attributes now i can specify that every magician element requires a certain minimum amount of a certain attribute if the user has chosen fire and the intelligence is below a minimum value then i return a validation error with a custom arrow key the same goes for the rest of the magician elements each returned validation error has a unique error code i can use these codes to test in the html template if one of these errors has occurred this time in the ng-if directive i access the form group dot errors dot error code because this validator is on group level now we can test if all the conditions are validated correctly you

Channel: Genka

Views: 2,779

Keywords: angular, reactive form, angular tutorial

Id: 9YuoQrvQ7R8

Length: 8min 21sec (501 seconds)

Published: Sat Jun 19 2021