Angular Reactive Forms Error | ERROR TypeError: Cannot read property 'valid' of undefined

Question

This is my first attempt at using reactive forms and needless to say I am not getting very far. I am getting this error: ERROR TypeError: Cannot read property 'valid' of undefined Am I missing something here? I have been following this tutorial to learn from. I am totally new to using reactive forms so any suggestions would help as well.

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

    loginForm: FormGroup;
    username = new FormControl('', Validators.required);
    password = new FormControl('', Validators.required);
    rememberme = new FormControl('');

    constructor(
        private fb: FormBuilder
    ) {
        this.loginForm = fb.group({
            'username': this.username,
            'password': this.password,
            'rememberme': this.rememberme
        });
    }

    onSubmit() {
        console.log('model-based form submitted');
        console.log(this.loginForm);
        return false;
    }

}


`
<div id="leftPart"></div>
<div id="rightPart" class="container-fluid px-4 py-2">
    <img src="assets/SVG/logo.svg" class="d-block w-50 mx-auto my-4" />
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <input class="form-control" placeholder="User Name" type='text' formControlName="username">
        </div>
        <div class="form-group">
            <input class="form-control" placeholder="Password" type='password' formControlName="password" />
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="form-group m-0">
                <div class="form-check m-0">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" formControlName="rememberme">
                        Remember me
                    </label>
                </div>
            </div>
            <button class="btn btn-transparent" style="font-size: 1rem;">
                <i class="fa fa-lock mr-2"></i>Forgot pwd?
            </button>
        </div>
        <button class="btn btn-primary btn-rounded btn-lg btn-block" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>
`

mxr7350 · Accepted Answer · 2018-02-22 16:17:28Z

5

You are naming your form loginForm in

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

And on submit button you are trying to disable it by [disabled]="!form.valid" but Angular doesn't know what is form as you named your form loginForm, therefore it should be [disabled]="!loginForm.valid"

answered Feb 22, 2018 at 16:17

mxr7350

1,4543 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JoseJimRin · Accepted Answer · 2018-02-22 18:07:22Z

Typescript

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

@Component({
  selector: 'app-login',
  templateUrl: './index.html'
})

export class LoginComponent implements OnInit {
  private form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      userName: [null, Validators.required],
      password: [null, Validators.required],
      rememberMe: [null]
    });
  }

  onSubmit() {
    console.log('model-based form submitted');
    console.log(this.form);
    return false;
  }
}

HTML

<form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <input class="form-control" placeholder="User Name" type="text" id="userName" formControlName="userName">
    </div>
    <div class="form-group">
        <input class="form-control" placeholder="Password" type="password" id="password" formControlName="password">
    </div>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="form-group">
            <div class="form-check m-0">
                <input class="form-check-input" type="checkbox" id="rememberMe" formControlName="rememberMe">Remember
            </div>
        </div>
        <button class="btn btn-transparent">Forgot pwd?</button>
    </div>
    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
</form>

This answer would be better if you explained which part of that substantial bit of code was changed or added.

Collectives™ on Stack Overflow

Angular Reactive Forms Error | ERROR TypeError: Cannot read property 'valid' of undefined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related