CODEWITHSUNDEEP
angular
Ian Martens
Ian Martens

Reputation: 23

Angular: Cannot read property 'controls' of undefined

I'm new to Angular and I'm following this online tutorial. When I trie to add some styling to the form I keep getting this error. Do any of you have a solution?

ERROR TypeError: Cannot read property 'controls' of undefined
at Object.eval [as updateDirectives] (RegisterComponent.html:14)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at checkAndUpdateView (core.js:13844)
at callViewAction (core.js:14195)
at execComponentViewsAction (core.js:14127)
at checkAndUpdateView (core.js:13850)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)

This is my RegisterComponent.html

<h1 class="page-header">Registreer</h1>

<form [formGroup]="form" (submit)="onRegisterSubmit()">

  <div class="form-group">
    <label for="username">Username</label>
    <div>
      <input type="text" name="username" class="form-control" autocomplete="off" placeholder="*Username" formControlName="username"/>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <div [ngClass]="{'has-error': (form.controls.email.errors && forms.controls.email.dirty), 'has-succes': !form.controls.email.errors}">
      <input type="text" name="email" class="form-control" autocomplete="off" placeholder="*Email" formControlName="email"/>
      <ul class="help-block">
          <li>Je moet een email invullen</li>
        </ul>
    </div>
  </div>

  <div class="form-group">
    <label for="password">Wachtwoord</label>
    <div>
      <input type="password" name="password" class="form-control" autocomplete="off" placeholder="*Wachtwoord" formControlName="password"/>
    </div>
  </div>

  <div class="form-group">
    <label for="confirm">Bevestig wachtwoord</label>
    <div>
      <input type="password" name="confirm" class="form-control" autocomplete="off" placeholder="*Bevestig wachtwoord" formControlName="confirm"/>
    </div>
  </div>

  <input type="submit" class="btn btn-primary" value="Registreer" />

</form>

This is my RegisterComponent.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.form = this.formBuilder.group({
      email: ['', Validators.required],
      username: '',
      password: '',
      confirm: ''
    });
  }

  onRegisterSubmit() {
    console.log(this.form);
  }

  ngOnInit() {
  }

}

I'm just following along the tutorial, so my component is not finished yet. But at this stage it should work for email according to the guy.

Upvotes: 2

Views: 12335

Answers (3)

jcunhafonte
jcunhafonte

Reputation: 479

I was playing around with your and checked that you had a small thing to fix:

  1. Typo in your template - "form" instead of "forms"

Check the solution below: https://stackblitz.com/edit/angular-ctqzxq

Upvotes: 0

Tomasz Kula
Tomasz Kula

Reputation: 16837

You do not need to use ngClass to style the form based on the form validity. Angular adds some very useful classes you you.

enter image description here

Check out the docs.

Upvotes: 0

gil.fernandes
gil.fernandes

Reputation: 14611

The problem is in this line:

<div [ngClass]="{'has-error': (form.controls.email.errors && forms.controls.email.dirty), 'has-succes': !form.controls.email.errors}">

Basically the object forms is undefined.

Upvotes: 2

Related Questions