Hello Everyone!

‍
After starting working on Angular 4 i was confused about forms techniques. Angular provides us two form techniques:

‍
1. Templete Driven
2. Model-Driven (Reactive Forms)

‍
In last month I had started my first Angular 4 project before this I have had only worked on ionic projects. In ionic we use template driven forms. Use ngModel to bind html form to controller.

‍
So, after starting my first project on angular 4 i have been confused about model driven and template driven forms. We were using both form techniques at same time and I observed that all my colleagues have been following the same wrong concept. But it was not the best of practices we should use both forms separately when its required.

Example code of wrong concept but it also works fine thats why we all were confused.

Html part

Email

Login

TypeScript part

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
loginForm: FormGroup;
data: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private _userService: UserService,
private login: FormBuilder
)
{
this.createForm();
this.data = {
userName: ""
}
}
onSubmit() {
this._userService.userLogin({ data: this.data })
.subscribe(res => {

},
errorMsg => {

});
}

createForm() {
this.loginForm = this.login.group({
userName: ["", Validators.required] });
}
}

Note:

This working fine but not a right way

Right Approach…Very Important

Import form modules in parent module file

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Then Import

imports: [
FormsModule,
ReactiveFormsModule
]

Html part

Email

Login

TypeScript part

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
loginForm: FormGroup;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private _userService: UserService,
private login: FormBuilder
)
{
this.createForm();
}

// if you want to set value of form controller name use this command.
// this.login.controls[‘userName’].setValue(‘John’);

onSubmit() {
this.username = this.login.get(‘userName’).value;
this.data = {
username: this.username
}
this._userService.userLogin({ data: this.data })
.subscribe(res => {

},
errorMsg => {

});
}

createForm() {
this.loginForm = this.login.group({
userName: ["", Validators.required] });
}
}

Conclusion:

So, the conclusion is that me must use right approach because angular has defined this approach in their documentation. And if we want to improve our coding skills so then we should work according to documentation.