Runtime error : Cannot find control with name: 'state' . Why?

Ionic Framework ionic-v3
1

Dear Friends,

I added 2 combo controls with cascaded capability … But i got runtime error as “Uncaught (in promise): Error: Cannot find control with name: ‘state’”.

My html part:

<!-- Cascaded change -->
<ion-item>
  <ion-label>State</ion-label>
  <ion-select (ionChange)='getDistrict($event)' formControlName="state" [(ngModel)]="data.state">
    <ion-option value="1" checked="true">KERALA</ion-option>
    <ion-option value="2">TAMILNADU</ion-option>
  </ion-select>
</ion-item>
<ion-item>
  <ion-label>District</ion-label>
  <ion-select formControlName="district" [(ngModel)]="data.district">
    <ion-option *ngFor="let item of items" value="{{item.did}}">{{item.dname}}</ion-option>
  </ion-select>       
</ion-item>

Ts Script is:

export class BirthCertificatePage {
  formgroup:FormGroup;
  username:AbstractControl;
  color:AbstractControl;
  lbody:AbstractControl;
  //cascaded select
  state:AbstractControl;
  district:AbstractControl;
  //
  data:any = {};
  users: any;
  payPage : any;
  // cascaded select
  public items: any;
  public items1: any;

  //
  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient, public formbuilder: FormBuilder, public propertyProvider: PropertyProvider ) {
     this.formgroup = formbuilder.group({
       username:['',Validators.required],
       color: ['',Validators.required],
       lbody: ['',Validators.required]
       //gender: ['',Validators.required]
     });
     this.username = this.formgroup.controls['username'];
     this.color = this.formgroup.controls['color'];
     this.lbody = this.formgroup.controls['lbody'];
     this.state = this.formgroup.controls['state'];
     this.district = this.formgroup.controls['district'];

     //this.gender = this.formgroup.controls['gender'];
     //this.data.gender = '';

     this.data.username = '';
     this.data.response = '';
     this.data.color = '';
     this.data.lbody = '';
     this.getUsers();
     this.payPage = PayPage;
     //cascaded select
     this.data.state = '';
     this.data.district = '';
     this.items1 =
     [                           
         {sid:'1',did:'1',dname:'TVM'},
         {sid:'1',did:'2',dname:'KLM'},
         {sid:'1',did:'3',dname:'ALP'},
         {sid:'1',did:'4',dname:'PTA'},
         {sid:'1',did:'5',dname:'IDK'},
         {sid:'1',did:'6',dname:'KTYM'},
         {sid:'2',did:'1',dname:'CNI'},
         {sid:'2',did:'2',dname:'CTRE'}
     ]

  }

  // cascaded combo
 
getDistrict(event)
    {
        this.items=this.items1.filter
        (
            (item) => {return item.sid.toLowerCase().indexOf(event.toLowerCase()) > -1;}
        );
    }

Please advise asap

Thanks

Anes

2

Dear Friends,

That problem is solved by adding

       state: ['',Validators.required],
       district: ['',Validators.required]

in this.formgroup …

Thanks

Anes

1 Like