Sharing Top Content from the Angular-sphere.

Gentle Introduction to Reactive Forms in Angular

  • Reactive forms are forms where we write logic, validations, controls in the components class part of the code unlike the template driven forms where control is done in the template.
  • The is a class that powers an individual form control, tracks the value and validation status, whilst offering a wide set of public API methods.
  • We can represent the nested form group within our template like below – – Notice is equal to which is the name assigned to the FormGroup instance within our component.
  • So there will be no need to import and , all we just need import is the – – To get the data when the user submit the form, we are going to apply the to the which will link to a method in our component to handle the submitted…
  • Thanks to typescript getter, which I use to make the template cleaner – – We can display validation errors like below within our template – – we can disable the submit button when the form is not valid by hooking to the form group valid status like below, note that…

angular forms, reactive forms

Reactive forms are forms where we write logic, validations, controls in the components class part of the code unlike the template driven forms where control is done in the template. The reactive form is flexible and can be use to handle any complex form scenarios. We write more component code and less html code which make unit testing easier.

To use reactive form, we need to explicitly import in our application module from

You need to understand and to be able to create forms in angular, hence we will talk about the and below.

The is a class that powers an individual form control, tracks the value and validation status, whilst offering a wide set of public API methods. Below is a basic example of a

The is a group of FormControl instances, keeps track of the value and validation status for the said group, and also offers public APIs. Below is a basic example of the

The above has shown us how to create an instance of and a , we can use them within our template like below:

Notice the , the must be equal to the name used to initialise the within the component which is . The must also be equal to the name used to initialise the in the component class. Below is the code…

Gentle Introduction to Reactive Forms in Angular

Comments are closed, but trackbacks and pingbacks are open.