Why error occurs on input text html element?

Question

I use angular 8.

Here is html code:

   <div class="row mt-5">
    <div class="col-md-6 mx-auto">
        <h2 class="text-center">Add fridge type</h2>
        <div class="card mt-3">
            <div class="card-body">
              <form [formGroup]="newFridgeType" (ngSubmit)="onSubmit()">
                <div class="form-group">
                  <label class="col-md-4">Title </label>
                  <input type="text" class="form-control" formControlName="text" />
                  <label class="col-md-4">Description </label>
                  <input type="text" class="form-control" formControlName="description" />
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-primary col-md-4" [disabled]="todoForm.invalid">Add</button>
                    <a [routerLink]="['/fridgetypeList']">
                    <button type="submit" class="btn btn-primary col-md-4 ml-1">Back</button>
                  </a>
                  </div>
              </form>
            </div>
        </div>
    </div>
  </div>

And here is component defenition:

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import { FridgeTypeService } from './fridgeType.service';
import { Router } from "@angular/router";

@Component({
  selector: 'fridgeType-add',
  templateUrl: './fridgeType-add.component.html',
  //styleUrls: ['./todo-add.component.css']
})

export class FridgeTypeAddComponent implements OnInit {

  newFridgeType: FormGroup;
  constructor(private formBuilder: FormBuilder, 
              private router: Router, 
              private fridgeTypeService: FridgeTypeService) 
              { }


  ngOnInit() {
    this.newFridgeType = this.formBuilder.group({
      text: ['', Validators.required],
      description: ['', Validators.required]
    });
  }

  onSubmit() {
    debugger;
    this.fridgeTypeService.save(this.newFridgeType.value)
      .subscribe(res => {
          let id = res['_id'];
          this.router.navigate(['/fridgetypeList']);
        }, (err) => {
          console.log(err);
        });
  }
}

In console I on this row:

<input type="text" class="form-control" formControlName="text" />

I get this error:

ERROR TypeError: Cannot read property 'invalid' of undefined
    at Object.eval [as updateRenderer] (FridgeTypeAddComponent.html:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:45294)
    at checkAndUpdateView (core.js:44277)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execEmbeddedViewsAction (core.js:44594)
    at checkAndUpdateView (core.js:44272)
    at callViewAction (core.js:44637)

Any idea why I get error above?

I guess the error comes from todoForm.invalid What is todoForm supposed to be? — yurzui
– yurzui, Commented Nov 27, 2019 at 17:07

ppgowda4 · Accepted Answer · 2019-11-27 17:09:17Z

2

Use newFridgeType for disabled attribute in your HTML instead ot todoForm

<button type="submit" class="btn btn-primary col-md-4" [disabled]="newFridgeType.invalid">Add</button>

answered Nov 27, 2019 at 17:09

ppgowda4

4183 silver badges12 bronze badges

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

Comments

Agustin Seifert · Accepted Answer · 2019-11-27 17:08:20Z

2

You are referencing a todoForm ([disabled]="todoForm.invalid") but your form, as I can see in your code, is named newFridgeType

answered Nov 27, 2019 at 17:08

Agustin Seifert

1,9581 gold badge16 silver badges30 bronze badges

Comments

Piercy · Accepted Answer · 2019-11-27 17:07:26Z

0

todoForm is not defined anywhere. So doing .invalid on it causes the error. You need to define what todoform is.

answered Nov 27, 2019 at 17:07

Piercy

8092 gold badges14 silver badges33 bronze badges

Comments

KBell · Accepted Answer · 2019-11-27 17:09:08Z

0

Your form group is named "newFridgeType" so you have to use it in place of "todoForm" in your html (submit button).

answered Nov 27, 2019 at 17:09

KBell

5121 gold badge8 silver badges24 bronze badges

Collectives™ on Stack Overflow

Why error occurs on input text html element?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related