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.
.webp)
