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

Ionic Framework ionic-v3
1

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:

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

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’.

Is it the wrong way to validate the form?

2

Hi

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

formControlName="sample.id"

HTH
Tim

3

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

4

hi

Check your formControlNames.

Compare to:

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

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

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.

6

  • 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