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.

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.