Search code examples
angularmodel-driven

getting ERROR TypeError: Cannot read property 'valid' of undefined for Angular 5 template form

I am trying to create a Model-Driven Angular template that is supposed to register new users. To do this, I have created 2 files for main use:

admin-register.component.html admin-register-form.component.ts

When attempting to go to the page that displays the registration form, I get the following in the Console

ERROR TypeError: Cannot read property 'valid' of undefined

What am I doing wrong?

TIA

error messages enter image description here

admin-register.component.html

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col-md-8 ">
      <form [formGroup]="userForm" (ngSubmit)="onSubmit()" >
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">

            <!-- set up first name -->
            <div class="form-group">
              <div class="input">
                <label>First Name</label>
                <input type="text" id="firstname" formControlName="firstname" class="form-control input-lg" name="firstname" tabindex="1" />
              </div>
            </div>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-6">
            <!-- set up last name  -->
            <div class="form-group">
              <div class="input">
                <label>Last Name</label>
                <input type="text" id="lastname" formControlName="lastname" class="form-control input-lg" name="lastname" tabindex="1" />
              </div>
            </div>
          </div>
        </div>

        <!-- set up EMail address -->
        <div class="form-group">
          <div class="input">
            <label>EMail Address</label>
            <input type="text" id="email" formControlName="email" class="form-control input-lg" name="email" tabindex="1">
          </div>
        </div>

        <!-- set up username -->
        <div class="form-group">
          <div class="input">
            <label>Username</label>
            <input type="text" id="username" formControlName="username" class="form-control input-lg" name="username" tabindex="1" />
          </div>
        </div>


        <div formGroupName="passinfo">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
              <!-- set up password -->
              <div class="form-group">
                <div class="input">
                  <label>Password</label>
                  <input type="text" id="password" formControlName="password" class="form-control input-lg" name="password" tabindex="1" />
                </div>
              </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6">

              <!-- set up password confirmation -->
              <div class="form-group">
                <div class="input">
                  <label>Password Confirmation</label>

                  <input type="text" id="passwordconf" formControlName="passwordconf" class="form-control input-lg" name="passwordconf" tabindex="1" />
                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- button to save the info -->
        <div class="input">

          <input [disabled]="!userForm.form.valid" class="btn btn-success btn-lg btn-primary btn-block btn-signin" type="submit" value="Sign Up For Free!">
        </div>
      </form>
    </div>
    <div class="col"></div>
  </div>
</div>

admin-register-form.component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { NgForm, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ElementRef } from '@angular/core/src/linker/element_ref';
import { formArrayNameProvider } from '@angular/forms/src/directives/reactive_directives/form_group_name';
import { User } from '../_admin-model/user';
import { Observable } from 'rxjs/Observable';
import { AdminServicesService } from '../_admin-services/admin-services/admin-services.service';

// items needed to support the operations with Observables
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/expand';
import 'rxjs/add/operator/filter';

[... snip ...]

@Component({
  selector: 'app-admin-register-form',
  templateUrl: './admin-register-form.component.html',
  styleUrls: ['./admin-register-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class AdminRegisterFormComponent implements OnInit {

  public userForm: FormGroup;

  onSubmit() {
    console.log(this.userForm.value);
  }


  [... snip ...]


  constructor(private authService: AdminServicesService) {

    this.userForm = new FormGroup({
      firstname: new FormControl(),
      lastname: new FormControl(),
      email: new FormControl(),
      username: new FormControl(),
      passinfo: new FormGroup({
        password: new FormControl(),
        passwordconf: new FormControl()
      })
    });
  }


  ngOnInit() {

  }
}
Solution

  • Use 

     !userForm.valid

    not 

    !userForm.form.valid

    When checking whether the form controls are all valid.