Angular Forms

Introduction

Form is something you can simply submit to the server. With Angular, you're creating a single page application, so there is no submitting to the server, instead you will need to handle the form through Angular and if you then want to submit something to the server, you will need to reach out via Angular's HTTP service
Angular ships with some powerful tools that helps in handling/working with form
- allow you to get the values the user entered
- it will also allow you to check if a form is valid
- it will allow you to conditionally change the way the form is displayed
- put some red borders around invalid controls
Angular offers two approaches to deal with form -
1. Template Driven Forms
2. Reactive Forms

Template Driven Approach - you simply set up your form in the template (in HTML code) and Angular will automatically infer the structure of your form i.e. which controls your forms has, which inputs and makes it easy for you to get started quickly.
Angular infers such forms, create such a JavaScript object for us as it does when using the template driven approach.

It is dependent on FormsModule, so import this in app.module file

import { FormsModule } from '@angular/forms';
...
imports: [
  FormsModule
],

With this imported, Angular will actually automatically create a JavaScript representations of the form when it detects a form element in HTML code.

Angular will NOT automatically detect your inputs in this form. To avoid this you need to register controls manually, you need to tell Angular hey within that form element, what should be an actual control of my form!
In the template driven approach, you simply pick the input which you want to add as a control and then you add ngModel, like this.
```
<input type="text" id="username" class="form-control" required ngModel>
```
This will be enough to tell Angular, that this input is actually a control of form, so ngModel in the end is a directive made available in the forms module.
Now for this to work, for this to be recognized as a control in your form, we need to give Angular one other piece of information, the name of this control and we do this by adding the normal HTML attribute name.
```
<input type="text" id="username" class="form-control" name="username" required ngModel>
```
Here name is nothing Angular 2 specific, name is the default attribute you can add to any HTML control. And with this, this control will be registered in this JavaScript representation of the form.

You might think that a good place would be on a click listener on submit button because this is a button we click when we want to submit the form, however this is not the best place to do it.
- Keep in mind that this button here is type submit, so if we click it as it is placed inside of an HTML form element, something else will happen, the default behavior of HTML will be triggered i.e. if you have a button in a form element, this button will submit the form, will send a request normally but besides that, it will also trigger a JavaScript submit event.
Angular takes advantage of this and gives a directive we can place on this form element as a whole, it is called ngSubmit and it actually only gives us one event we can listen to.
```
<form (ngSubmit)="onSubmit()">
```
To retrieve form values, we want to get access to the form created by Angular. We can use local references. We could place #form on the form element and now we could access this form element on the form reference in our template.
```
<form (ngSubmit)="onSubmit()" #form>
```
Keep in mind the form element is kind of a selector for a directive built into Angular which will create JavaScript object automatically, we can get access to it by writing ngForm i.e. #form="ngForm"

Finally we could pass form as an argument to the onSubmit() method and print it there.

<form (ngSubmit)="onSubmit()" #form="ngForm">

@ViewChild('form', {static: false}) formData: NgForm;
onSubmit(): void {
  console.log('success: ', this.formData);
}

We also do have a value property and if we expand this, we indeed see a couple of key-value pairs here where we have the names of the controls, so the names we set up here and the name attribute like username and email, we find them here and then the values the user entered.
This is how we can submit such a form and how we can also get access to the form object created by Angular.

Reactive Approach - you actually define the structure of the form in Typescript code, you also set up the HTML code and then you manually connect it. This gives you greater control over form, you can fine tune every little piece about your form.