Undefined FormControls when using FormBuilder

Ionic Framework ionic-v3
1

Hi, I’m very new to Ionic and Angular.

I’m trying to build a form within a new Ionic 3 app that I started yesterday.

I followed this documentation for creating a form using FormBuilder.

When the form page is loaded, I get this error:

TheFormPage.html:22 ERROR TypeError: Cannot read property 'valid' of undefined
    at Object.eval [as updateRenderer] (TheFormPage.html:25)

Here is the entirety of my component source

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'page-the-form',
  templateUrl: 'the-form.html',
})
export class TheFormPage {

  private thing : FormGroup;

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
    this.thing = this.formBuilder.group({
      title: ['', Validators.required],
      details: ['', Validators.required],
    });
  }

  logThing(){
    console.log(this.thing.value)
  }

}

and the template

<ion-header>
  <ion-navbar>
    <ion-title>Thing!</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <form [formGroup]="thing" (ngSubmit)="logThing()">

    <ion-item>
      <h1><strong>Make a Thing!</strong></h1>
    </ion-item>

    <ion-item>
      <ion-label stacked>Title</ion-label>
      <ion-input type="text" formControlName="title"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label stacked>Details</ion-label>
      <ion-textarea formControlName="details"></ion-textarea>
    </ion-item>

    <button ion-button large type="submit" [disabled]="!todo.valid">
      Submit
    </button>

  </form>

</ion-content>
2

todo.valid is undefined. I checked the code in the docs and it’s fine. So either you made a typo or you didn’t understand why you couldn’t make the change you did. If it’s the latter, that’s an important thing to fix. Either way, one of your first projects should be to understand error messages. todo.valid probably appears near line 22 or 25 of the template.

1 Like
3

Yeah, it was !todo.valid here

<button ion-button large type="submit" [disabled]="!todo.valid">

Thanks for your suggestion to look there.