# Form Validation with Populated Data "Cannot find control with name"

**URL:** <https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756>\
**Category:** ionic-v3\
**Created:** [April 25, 2017, 9:19am UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756 "2017-04-25T09:19:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ankitkaushik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ankitkaushik/32/108822_2.png) [@ankitkaushik](https://forum.ionicframework.com/u/ankitkaushik)\
**Post date:** [April 25, 2017, 9:19am UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756/1 "2017-04-25T09:19:48Z")

</div>

Hi,

I am trying to add validations in my form. This is single form which is being used to add as well as edit data.

**Below is HTML code:**

```auto
> <ion-content padding>
> <form [formGroup]="sampleForm">
> <ion-list>
> <input type="hidden" formControlName="sample.id" />
> <ion-item>
> <ion-label floating>sample Name</ion-label>
> <ion-input type="text" formControlName="sample.name"></ion-input>
> </ion-item>
> <ion-item>
> <ion-label floating>Description</ion-label>
> <ion-input type="text" formControlName="sample.description"></ion-input>
> </ion-item>
> </ion-list>
> </form>
> <ion-row>
> <ion-col width=50>
> <button full ion-button>Cancel</button>
> </ion-col>
> <ion-col width=50>
> <button full ion-button (click)="savesample(sample.id, sample.name, sample.description)"><span *ngIf="sample.id">Update</span><span *ngIf="!sample.id">Add</span></button>
> </ion-col>
> </ion-row>
> </ion-content>

```

**TS File**

```auto
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { UserData } from '../../../providers/user-data';
import { Validators, FormControl, FormGroup, FormBuilder} from '@angular/forms';

@Component({
  selector: 'page-sample',
  templateUrl: 'sample.html'
})
export SamplePage {
	sampledetails: FirebaseListObservable<any[]>;
  sampleForm: FormGroup;
  sample = {
    id: '',
    samplename: '',
    description: ''
  };
  role: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public userData: UserData, public af: AngularFire, public formBuilder: FormBuilder) {
  	
    this.sampledetails = this.af.database.list('/samples');
    this.sample.id=this.navParams.get('key');
    this.sample.name = this.navParams.get('name');
    this.sample.description = this.navParams.get('description');
    this.classForm = formBuilder.group({
        id: this.class.id,
        classname: [this.sample.name, Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z]*'), Validators.required])],
        description: [this.sample.description, Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z]*'), Validators.required])]
    });
  }

  savesample(id, name, description) {
  		var newsample = {
  			name: name,
  			description: description,
  		}

      if(id) { this.sampledetails.update (id, newsample).then(data=>{
        console.log(newsample);
        this.navCtrl.setRoot(sampleListPage);
      }, error => {
        console.log(error);
      });}
        else {
  		this.sampledetails.push (newsample).then( data => {
  			console.log(newsample);
  			this.navCtrl.setRoot(sampleListPage);
  		}, error => {
  			console.log(error);
  		});
    }
  	}
}

```

Above code is throwing following error:  
Cannot find control with name: ‘[sample.id](http://sample.id)’.

Is it the wrong way to validate the form?

---

<div class="post-metadata">

**Author:** ![tja2353](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@tja2353](https://forum.ionicframework.com/u/tja2353)\
**Post date:** [April 25, 2017, 10:23am UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756/2 "2017-04-25T10:23:29Z")

</div>

> [@ankitkaushik](#):
>
> formControlName=“samlpe.id”

Hi

You have incorrectly spelled ‘sample’ in your html file.

```auto
formControlName="sample.id"

```

HTH  
Tim

---

<div class="post-metadata">

**Author:** ![ankitkaushik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ankitkaushik/32/108822_2.png) [@ankitkaushik](https://forum.ionicframework.com/u/ankitkaushik)\
**Post date:** [April 25, 2017, 10:25am UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756/3 "2017-04-25T10:25:08Z")

</div>

Hi Tim,

Thanks for pointing out but this issue is not related to spelling. There something else which is being missed from my side.

Cheers

---

<div class="post-metadata">

**Author:** ![tja2353](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@tja2353](https://forum.ionicframework.com/u/tja2353)\
**Post date:** [April 25, 2017, 12:03pm UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756/4 "2017-04-25T12:03:46Z")

</div>

hi

Check your formControlNames.

Compare to:

```auto
        <form [formGroup]="todoForm" novalidate>
            <ion-item>
                <ion-label color="primary">Complete?</ion-label>
                <ion-checkbox formControlName="isComplete">
                </ion-checkbox>
            </ion-item>

            <ion-item>
                <ion-label floating color="primary">Name</ion-label>
                <ion-input type="text" formControlName="nameA">
                </ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating color="primary">Description</ion-label>
                <ion-input type="text" formControlName="description">
                </ion-input>
            </ion-item>
        </form>

```

```auto
        this.todoForm = this.formBuilder.group({
            nameA: [this.formResult.name, Validators.required],
            description: [this.formResult.description],
            isComplete: [this.formResult.isComplete]
        });
            

```

---

<div class="post-metadata">

**Author:** ![ankitkaushik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ankitkaushik/32/108822_2.png) [@ankitkaushik](https://forum.ionicframework.com/u/ankitkaushik)\
**Post date:** [April 25, 2017, 12:15pm UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756/5 "2017-04-25T12:15:39Z")

</div>

There seems to be a gap in the code which you shared and my requirement. Actually it would have been simpler if i was using this form for only to enter the data but i am also using same form for editing the data which means it gets populated with the data in case its already present in database. Can you please suggest something in the context where data is being fetched from the database.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [April 25, 2017, 7:34pm UTC](https://forum.ionicframework.com/t/form-validation-with-populated-data-cannot-find-control-with-name/87756/6 "2017-04-25T19:34:18Z")

</div>

- I see zero value in the hidden field.

- As @tja2353 mentioned, your `formControlNames` are a mess. Use the actual names of the controls: “classname” and “description”.

- I don’t understand why you have `sample` at all, because all the information is in the form value. Storing the same thing in two different places is asking for bugs that happen when they don’t agree