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.