In my form not create validator on string and can not read property 'valid' undefined

Question

In my Header Component

<form formGroup="loginForm" (ngSubmit)="loginSubmit(loginForm.value)">
   <div class="form-group">
      <label for="email">Email</label>
      <input type="text" class="form-control" name="email" formControlName="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
   </div>
   <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" name="password" formControlName="password">
   </div>
   <p class="text-center">
      <button class="btn btn-primary"><i class="fa fa-sign-in"></i> Log in</button>
   </p>
</form>

Here I describe my form in header.component.ts file

export class HeaderComponent implements OnInit {

  loginForm: FormGroup;
  submitted: boolean = false;
  errorMessage: any;
  public model: Login;
  constructor(private _userService: UserService,
              private _fb: FormBuilder,
              private _avRoute: ActivatedRoute,
              private _route: Router) {
              this.model = new Login();
              this.loginForm = this._fb.group({
                  email: ['', [Validators.required]],
                  password: ['',[Validators.required]]
                })   
               }

  ngOnInit() {

  }

  loginSubmit(){
    if(!this.loginForm.valid){
      this.submitted = true;
      return;
    }
    this._userService.userLogin( this.loginForm.value )
      .subscribe(data => {

          this._route.navigate(["home"]);
      },error => this.errorMessage = error);
  }  

}

from last 4 hours, I solve the issue but not found the better solution, I also check this answer but not solve Click here

Or in my .ts page when I button submit event loginSubmit() check if this is valid or not, but error like cannot read property valid is undefined

Answer 1

Be sure you has already imported ReactiveFormsModule in your app.module.ts and try to add [ ] in html [formGroup]="loginForm" instead of formGroup="loginForm":

<form [formGroup]="loginForm" (ngSubmit)="loginSubmit(loginForm.value)">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="text" class="form-control" name="email" formControlName="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" formControlName="password">
  </div>
  <p class="text-center">
    <button class="btn btn-primary"><i class="fa fa-sign-in"></i> Log in</button>
  </p>
</form>

Component:

export class HeaderComponent implements OnInit {

  loginForm: FormGroup;
  submitted: boolean = false;
  errorMessage: any;
  public model: Login;
  constructor(private _userService: UserService,
              private _fb: FormBuilder,
              private _avRoute: ActivatedRoute,
              private _route: Router) {
              this.model = new Login();
              this.loginForm = this._fb.group({       

                  email: ['', [Validators.required]],
                  password: ['',[Validators.required]]
                })   
               }

  ngOnInit() {

  }

  loginSubmit(){
    if(!this.loginForm.valid){
      this.submitted = true;
      return;
    }
    this._userService.userLogin( this.loginForm.value )
      .subscribe(data => {

          this._route.navigate(["home"]);
      },error => this.errorMessage = error);
  }  

}

Module with ReactiveFormsModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, RouterModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

is working here:

https://stackblitz.com/edit/angular-xq4co6?embed=1&file=app/app.component.html

Answer 2

In your template change

formGroup="loginForm"

to

[formGroup]="loginForm"