Submitting form data 

So far, we have learned to design and develop our forms in our applications. In this section, we will take things to downstream systems, which is to capture the data and process it.

Angular generates a form model in both approaches, be it template-driven forms or reactive forms. The form model holds the data of the form elements and the state of the form elements. 

In the previous sections, where we have implemented our forms, we have created a method to call on ngSubmit

For our template-driven login form, we added the following code to our login.component.ts file:

login(loginForm)
{
console.log(loginForm);
console.log(loginForm.username);
}

We are passing the entire form object to the login method. Now the loginForm object will have all the details of the form controls, as well as the states. 

In our registration form, which is generated using a model-driven approach, we have used the instance of formGroup that we created in our Component class register.component.ts file.

The following is the code we have added for capturing and processing the data:

register()
{
console.log(this.registerForm.value);
}

If you notice, for reactive forms, we do not have to pass any form data, since we had created the registerForm instance of FormGroup, so it's available in our class using the this operator. 

Once we have captured the data provided to the user, based on the application requirements, we can now implement our custom logic inside the component.

Some of the common activities we do once we capture data are the following:

  • Securing data to make sure that we do not allow junk data into our system.
  • Processing/enhancing the data, such as converting the password into an encrypted value.
  • Checking for any automated bots processing our applications.
  • Making HTTP calls to backend services using Angular services. We have an entire chapter dedicated to this particular topic: Chapter 12Integrating Backend Data Services. 

That concludes this chapter on Angular forms. We have covered a lot of ground and I am sure at this point you will be excited to create your own forms, write custom validations, and process the captured data.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.244.67