You can place HTML form controls (such as <input> or <select>) in the component template and bind them to data model properties, using directives like ngModel.
With template-driven forms, you don’t create Angular form control objects. They are created by Angular directives using information from your data bindings. You don’t have to push and pull data values around because of Angular handles that for you through the ngModel directive.
Template Form Model Setup
Step-1: Create a Template Form Component: Command to create Template Form component is:
ng g c template-form --spec false
Note: ng g c command will create New Component Templat-Form and --spec command will not create .spec file in the component files. As shown in the figure, there is no spec file.
Step-2: import FormsModule in app.module.ts file: As we know that Template-driven forms make use of the "FormsModule". So we include this in app.module.ts file as below:
import { FormsModule } from '@angular/forms';
Step-3: Now write following code in template-form.component.html
<div class="container">
<h3 class="text-center text-danger">Template Form</h3>
<br /><br />
<div class="row">
<div class="col-xs-12">
<form #myform="ngForm" (ngSubmit)="onSubmit(myform)">
<div class="row">
<div class="col-sm-3 form-group">
<label for="courseName" class="control-label">Course Name</label>
<input
required
type="text"
id="courseName"
class="form-control"
name="courseName"
ngModel
/>
</div>
<div class="col-sm-3 form-group">
<label for="courseDesc">Course Description</label>
<input
required
type="text"
id="courseDesc"
class="form-control"
name="courseDesc"
ngModel
/>
</div>
<div class="col-sm-3 form-group">
<label for="courseAmount">Course Amount</label>
<input
required
type="number"
id="courseAmount"
class="form-control"
name="courseAmount"
ngModel
/>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-6">
<button class="btn btn-primary" type="submit">
Add Data
</button>
</div>
</div>
</form>
<br />
{{ myform.value | json }}
Step-4: Now write code for template-form.component.ts, But first, add NgForm module in TemplateFormComponent.ts file
import { NgForm } from '@angular/forms';
Step-5: Code for template-form.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-template-form',
templateUrl: './template-form.component.html',
styleUrls: ['./template-form.component.css']
})
export class TemplateFormComponent implements OnInit {
constructor() {}
ngOnInit() {}
onSubmit(form: NgForm) {
console.log('Course Name is : ' + form.value.courseName);
console.log('Course Desc is : ' + form.value.courseDesc);
console.log('Course Amount is : ' + form.value.courseAmount);
}
}
Code Explanation:
<form #myform="ngForm" (ngSubmit)="onSubmit(myform)">
1. #myform is a local variable which will take the instance of ngForm of Template driven Form and (ngSubmit) will submit the data when the user press the submit button.
2. Template driven form require ngModel to receive data in Template driven forms.
3. In .ts file we need to import NgForm modeule as we are dealing with forms of type Template driven type.
4. In OnSubmit() function we create an instance of NgForm as form and using this instance we are getting form values and send it to the console.
5. In order to display form value in View it-self, we use a local variable to display the values as json object using the command myform.value | json.
Code Output:
