Template driven form approach in Angular.

In this article, I will directly write what is important for the template driven form for the beginner who is struggling to search straight forward code so that they can work ahead.

If you can install bootstrap in your app, it will look good. otherwise you can use this code without bootstrap also.

import forms module in app.module.ts like this.

import { FormsModule } from ‘@angular/forms’;

app.component.html

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8">
<p>fill the form and submit form. this will print the form data in console developer tool </p>
<form  #formData="ngForm">
<div class="form-group">
<label>user name</label>
<input type="text"
class="form-control"
ngModel
name="username"
>
</div>
<div class="form-group">
<label>Mail</label>
<input type="email"
class="form-control"
ngModel
name="email"
>
</div>
<button class= "btn btn-primary" (click)= "onSubmit(formData.value)">Submit</button>
</form>
</div>
</div>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-templateform',
templateUrl: './templateform.component.html',
styleUrls: ['./templateform.component.css']
})
export class TemplateformComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
onSubmit(dataFromTemplateForm: any){
console.log(dataFromTemplateForm);
}
}

Run the application and open the console, fill the form then click on submit button. you will see result in console.

Hope it helps the beginner to get some confidence. If any one want help in this, let me know in comments, we will connect one to one.

Thanks. Keep Learning and Enjoy.