Angular Form - Template Driven Form

Angular Form - Reactive Form Form Validation Comparisons between Reactive Forms and Template Driven Forms

Angular forms work in two different ways, either as `Template Driven Forms` or as `Reactive Forms` - also sometimes called `Model-Driven Forms`

What Are Angular Template-Driven Forms?

Template-driven forms are driven by derivatives in the template. It first creates html-input-elements and then use directives like ngModel to bind their value to a component's variable.

Advantages and Disadvantages of Template-Driven Forms [1]

Ad: easier to create, DIS: not friendly to unit testing, because testing requires the presence of a DOM.

Differences Between Template-Driven and Reactive Forms [1]

Template-driven forms use the FormsModule, while reactive forms use the ReactiveFormsModule.
Template-driven forms are asynchronous, while reactive forms are synchronous.
In template-driven forms, most of the interaction occurs in the template, while in reactive-driven forms, most of the interaction occurs in the component.

Form	Module	Sync	Interactions/structures
Template-driven forms	FormsModule	Asynchronous	in template .html
Reactive forms	ReactiveFormsModule	Synchronous	in component .ts

Click here for the demo

THESE ARE NOTES I TOOK FROM MY MICROSOFT FRONTEND DEVELOPMENT COURSE

Template Driven Form. This is the most basic way of constructing an Angular form, which involves rendering a form in a template with special properties that grant it Angular-specific form controls.

First we need to ensure that the FormsModule is imported into our Angular Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  <====
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { GitSearchService } from './git-search.service';
import { GitSearchComponent } from './git-search/git-search.component';
import { RouterModule, Routes } from '@angular/router';
import { HomePageComponent } from './home-page/home-page.component';
import { NotFoundComponent } from './not-found/not-found.component';

const appRoutes: Routes = [
  { path: '', 
    component: HomePageComponent 
  },
  { path: 'search',      
    redirectTo: '/search/angular', 
    pathMatch: 'full' },
  {
    path: 'search/:query',
    component: GitSearchComponent,
    data: {title: 'Git Search'}
  },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    GitSearchComponent,
    HomePageComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],
  providers: [GitSearchService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open up src/app/git-search/git-search.component.html

<h3>{{title}} - {{displayQuery}}</h3>
<input name="query" placeholder="Enter Search Here" [(ngModel)]="searchQuery" />
<button (click)="sendQuery()">Submit</button>
<div *ngIf="searchResults; else elseBlock">
  <h3 class="total">Total Results: {{searchResults.total_count}}</h3>
  <ul class="list">
    <li [ngStyle]="{'background-color' : (i % 2 === 0) ? 'silver' : 'white'}" class="list_item" *ngFor="let result of searchResults.items; index as i;">
      <a [href]="result.html_url">
        <img class="avatar" [src]="result.owner.avatar_url" /> 
        <h4 class="title">{{result.name}} 
          <small> by {{result.owner.login | uppercase}}</small> 
        </h4>
      </a> 
      <p class="description"> {{result.description}}</p> 
      <p> Created On: {{result.created_at | date:'fullDate'}} </p>
    </li>
  </ul>
</div>
<ng-template #elseBlock>Loading...</ng-template>

Let's wrap the initial search input in a
tag to turn it into a real form.

<form (ngSubmit)="sendQuery()">
   <div *ngFor="let key of modelKeys">
       {{key}}<input name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" />
   </div>
<button type="submit" >Submit</button>
</form>

Open up src/app/git-search/git-search.component.ts, We can now proceed to use Angular's features with our form.

import { Component, OnInit } from '@angular/core';
import { GitSearchService } from '../git-search.service'
import { GitSearch } from '../git-search'
import { ActivatedRoute, ParamMap, Router } from '@angular/router'
import { AdvancedSearchModel } from '../advanced-search-model'

@Component({
  selector: 'app-git-search',
  templateUrl: './git-search.component.html',
  styleUrls: ['./git-search.component.css']
})
export class GitSearchComponent implements OnInit { 
  searchResults: GitSearch;
  searchQuery: string;
  displayQuery: string;
  title: string;
  constructor(private GitSearchService: GitSearchService, private route: ActivatedRoute, private router: Router ) { }

// create an instance of our model, and bind it to the this.model property of our component. 
//take our model object and create an array of its keys with the Object.keys() method.
// Object.keys JavaScript method is a handy method for converting the keys of an object into an array for iteration purposes.
model = new AdvancedSearchModel('', '', '', null, null, '');
modelKeys = Object.keys(this.model);

  ngOnInit() {
    this.route.paramMap.subscribe( (params: ParamMap) => {
      this.searchQuery = params.get('query');
      this.displayQuery = params.get('query');
      this.gitSearch();  
    })
    this.route.data.subscribe( (result) => {
      this.title = result.title
    });
  }

  gitSearch = () => {
    this.GitSearchService.gitSearch(this.searchQuery).then( (response) => {
      this.searchResults = response;
    }, (error) => {
      alert("Error: " + error.statusText)
    })
  }

sendQuery = () => {
    this.searchResults = null;
    let search : string = this.model.q;
    let params : string = "";
    this.modelKeys.forEach(  (elem) => {
        if (elem === 'q') {
            return false;
        }
        if (this.model[elem]) {
            params += '+' + elem + ':' + this.model[elem];
        }
    })
    this.searchQuery = search;
    if (params !== '') {
        this.searchQuery = search + '+' + params;
    }
    this.displayQuery = this.searchQuery;
    this.gitSearch();
}

}

References

[1] https://code.tutsplus.com/tutorials/angular-form-validation-with-reactive-and-template-driven-forms--cms-32131

puddlejumper26 / blogs