CODEWITHSUNDEEP
angular
Rockers
Rockers

Reputation: 163

I am getting error like" Cannot read property 'get' of undefined". How to solve this issue?

I am trying to validate the username and password with admin on form submit. When I am trying to get the user inserted value from the username field, it is showing this error.

Here is my html code file:- second-page.component.html

<div class="row justify-content-center mt-5">
    <div class="card shadow p-3 mb-5 bg-white rounded w-25" style="width: 18rem;">
        <div class="card-body">
            <div>
                <h4 class="text-center">Login Form</h4>
              </div>
              <div class="mt-4">
                  <form novalidate #loginForm="ngForm" (ngSubmit)="onSubmit()">

                      <div class="form-group">
                          <label for="userName">User Name</label>
                          <input required ngModel name="userName" #userName="ngModel" (change)="log(userName)" id="userName" type="text" class="form-control">
                          <div class="alert alert-danger" *ngIf="userName.touched && !userName.valid">
                            <div *ngIf="userName.errors.required">User Name is required.</div>
                          </div>
                      </div>

                      <div class="form-group">
                          <label for="password">Password</label>
                          <input required ngModel name="password" #password="ngModel" (change)="log(password)" id="password" type="password" class="form-control">
                          <div class="alert alert-danger" *ngIf="password.touched && !password.valid">
                            <div *ngIf="password.errors.required">Password is required.</div>
                          </div>
                      </div>

                      <div class="form-group text-center">
                        <input class="btn btn-outline-secondary mr-2" type="reset" id="button" value="Clear">
                        <button class="btn btn-primary" type="submit" [disabled]="loginForm.invalid">Submit</button>
                      </div>
                  </form>
              </div>          
        </div>
      </div>
</div>

Here is my typescript code file:- second-page.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from "@angular/forms";
import { Router } from "@angular/router";

@Component({
  selector: 'app-second-page',
  templateUrl: './second-page.component.html',
  styleUrls: ['./second-page.component.css']
})
export class SecondPageComponent implements OnInit {

  loginForm: FormGroup;

  constructor(private router: Router) { }

  ngOnInit() {
  }

  log(x){ console.log(x); }

  onSubmit()
  {
    console.log("Hello");
    let username = this.loginForm.get('UserName').value;
    let password = this.loginForm.get('Password').value;

    if (username === 'admin' && password === 'admin')
    {
      this.router.navigate(['/registrationpage']);
    }  

  }
}

Upvotes: 2

Views: 139

Answers (3)

AVJT82
AVJT82

Reputation: 73357

As earlier mentioned, you are mixing reactive forms with template driven. If you just need to access the form values, you can pass the value of the form to submit function:

<form novalidate #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">

Then you can access those form values in your function like:

onSubmit(formValue) {
  if (formValue.userName === "admin" && formValue.password === "admin") {
    console.log('admin')
  } else {
    console.log('not admin!')
  }
}

STACKBLITZ

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86730

As you are using template driven form, and you are trying to get value using formControl in the controller side, so basically you are mixing both.

In your case (Template driven form), You need to fetch form using viewChild (local variable) like this -

@ViewChild('loginForm') loginForm: any;

and then you can add validation or get value using -

this.loginForm.valid  // or whatever you need to play with form

For more in details -

Upvotes: 1

Malavan
Malavan

Reputation: 819

You have to initialize the FormGroup.

this.loginForm = {
 "UserName" :  new FormControl({value: ''}, Validators.required),
 "Password" : new FormControl({value:''},Validators.required)
}

Upvotes: 0

Related Questions