Angular 4 Template Driven Forms:
- Angular offers two types of forms: template-driven and model-driven
1.Template Driven :
- template-driven forms place the emphasis on developing a form within an HTML template and handling most of the logic for the form-inputs, data validation, saving, and updating-in form directives placed within that template.
- Very less code required because most of the forms related work have been done by the angular framework itself.
- heavy use of the ngModel form directive
- FormModule must be imported into app-module.ts
- FormModule is available for following package
import { FormsModule } from ‘@angular/forms’;
Two Important Directives for form building:
- • NgForm • ngModel
- ngForm: It plays a great role in form building, this angular directive concrete values of all HTML elements of form.
- We can say that by using this directive we are capable to create form object.
- NgModel: This directive has used no binding, one-way and two-way data binding.
- It is responsible to hold values of HTML elements.
- It is also used to validate HTML elements values.
Example
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>Simple Form</h2>
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<input type='text' name='fname' ngModel required />
<input type='text' name='lname' ngModel required />
<input type='submit' [disabled]="f.invalid" value='click here' />
<span> {{ fname }}</span>
<span> {{ lname }}</span>
</form>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
fname="";
lname="";
onSubmit(form: any): void{
console.log(form);
this.fname = form.fname;
this.lname = form.lname;
}
}
Output:
