Angular 4 FORMS Confusion

Angular 4 FORMS Confusion

Hello Everyone!
After starting working on Angular 4 i was confused about forms techniques. Angular provide 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.

Table of Contents

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.

Subscribe to our Newsletter.

Thank you! Your subscription has been added to our newsletter!
Oops! Something went wrong while submitting the form.

Related Blogs.

What is Material Design Lite and what are its advantages?
logos
What is Material Design Lite and what are its advantages?
MDL stands for "Material Design Lite". It is a free and open source library used for website's designing and its a look like material design.
SEO with Angular – Angular Universal
logos
SEO with Angular – Angular Universal
SEO is an abbreviation of Search Engine Optimization. Here, you will learn how to do SEO with Angular for a web page.
Difference between Functional and Object Oriented Programming
logos
Difference between Functional and Object Oriented Programming
These are two very popular programming paradigms in software development that developers design and program to. Read more to find out.
How to use Font Awesome for your website?
logos
How to use Font Awesome for your website?
Font Awesome helps adding scalable and beautiful icons on a web page. Let's teach you how to use awesome fonts for your site.
JQuery: The Write Less, Do More
logos
JQuery: The Write Less, Do More
jQuery is a (write less or do more) lightweight JS library that simplifies programming with JavaScript. Know more about the benefits of using jQuery in this blog.
Cross Browser Compatibility Issues
logos
Cross Browser Compatibility Issues
What is Cross Browser issue? They usually occur in various web applications. Learn to solve these cross browser compatibility issues in this blog post.
How To Add Flash Messages in AngularJS?
logos
How To Add Flash Messages in AngularJS?
Is something wrong with adding flash messages in AngularJS? Read this guide to get professional advice.
Publish Subscribe pattern
logos
Publish Subscribe pattern
Nowadays, Web Applications are set to target maximum relevant users as they can. In order to do so, an application must have these qualities.
Dependencies issue when one signal is used with google maps (React native)
logos
Dependencies issue when one signal is used with google maps (React native)
Problem Statement: Google maps work fine when used alone but it get dependency issue when one signal is added to the project.
Setup Redis on AWS
logos
Setup Redis on AWS
This tutorial will help you in setting up redis on AWS. Follow these steps to configure the redis through Amazon Linux.
React Native Facebook Login?
logos
React Native Facebook Login?
This guide provides examples of using the Facebook Login Button and Login Manager components in your React Native applications.
Create an Angular modular plugin
logos
Create an Angular modular plugin
How to develop a Modular Plug-in For angular 4? Learn to create an angular modular plugin here.

07 — Contact Us

heading glow
glow

Take the road to {digital transformation} with our top-notch software development services.

map
2 West Canal Bank Road, Lahore ,Pakistan
500 Grant Street, Downtown, Suite 2900,Pittsburgh, PA 15219, USA
3 Dalmeny Ave Huddersfield, Huddersfield, HD4 5NN, UK
DSO-IFZA , IFZA Properties, Dubai Silicon oasis, UAE
Don’t like the forms? Drop us a line via email.
hello@phaedrasolutions.com
no-img
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Pakistan
2 West Canal Bank Road, Lahore ,Pakistan
UK
500 Grant Street, Downtown, Suite 2900, Pittsburgh, PA 15219, USA
dubai
3 Dalmeny Ave Huddersfield, Huddersfield, HD4 5NN, UK
america
DSO-IFZA , IFZA Properties, Dubai Silicon oasis, UAE