# Undefined FormControls when using FormBuilder

**URL:** <https://forum.ionicframework.com/t/undefined-formcontrols-when-using-formbuilder/99521>\
**Category:** ionic-v3\
**Created:** [July 25, 2017, 7:22pm UTC](https://forum.ionicframework.com/t/undefined-formcontrols-when-using-formbuilder/99521 "2017-07-25T19:22:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![magnetik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/magnetik/32/111838_2.png) [@magnetik](https://forum.ionicframework.com/u/magnetik)\
**Post date:** [July 25, 2017, 7:22pm UTC](https://forum.ionicframework.com/t/undefined-formcontrols-when-using-formbuilder/99521/1 "2017-07-25T19:22:32Z")

</div>

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](https://ionicframework.com/docs/developer-resources/forms/) for creating a form using `FormBuilder`.

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

```auto
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

```auto
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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [July 25, 2017, 7:52pm UTC](https://forum.ionicframework.com/t/undefined-formcontrols-when-using-formbuilder/99521/2 "2017-07-25T19:52:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![magnetik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/magnetik/32/111838_2.png) [@magnetik](https://forum.ionicframework.com/u/magnetik)\
**Post date:** [July 25, 2017, 10:17pm UTC](https://forum.ionicframework.com/t/undefined-formcontrols-when-using-formbuilder/99521/3 "2017-07-25T22:17:09Z")

</div>

Yeah, it was `!todo.valid` here

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

```

Thanks for your suggestion to look there.