Ionic - Dynamic forms. Formbuilder triggers after some delay and generates error

Ionic Framework ionic-v3
1

Hi,

I have to load a json to generate form dynamically. It generates an error on first load.

Cannot find control with name:

There is a dropdown, which triggers a reload of data for form generation. The subsequent form generations work fine. Can someone help in identifying the error of first load please?

Code snippets of TS, view and json are as under.

JS/TS

updateForm(v){
JSON.parse(v.data.formhtml).formhtml.forEach(e=>{
  e.field.forEach(ei=>{
    this.formData[ei.name] = [''];
    if(ei.validation == 'required')
      this.formData[ei.name].push(Validators.required);
  });
});
this.consform = this.formBuilder.group(this.formData);
this.formfields = JSON.parse(v.data.formhtml).formhtml;
}

Pages

form *ngIf="consform" [formGroup]="consform" (ngSubmit)="createItem()">
  <label class="item item-input item-select">
    <div class="input-label">
    <select formControlName="type"
        [(ngModel)]="selectedForm"

        (ngModelChange)="updateForm($event)">
        <option  *ngFor="let form of loadedForms;  let formIndex = index "  [ngValue]="form"
         >  {{form.formname}}</option>

    </select>
    </div>
  </label>
  <hr>
  <span  *ngFor="let fm of formfields; let fi=index">
    {{fm.title}}
    <ion-list>
      <ion-item *ngFor="let el of fm.field">
        <span>{{el.label}}</span><ion-input type='text' placeholder="{{el.label}}" [formControlName]=el.name></ion-input>
      </ion-item>
    </ion-list>
  </span>
</form>

JSON

{
	"formhtml": [{
		"title": "From",
		"field": [{
				"label":"Name",
				"name": "fname",
				"type": "text",
				"validation": "required"
			},
			{
				"label":"Port",
				"name": "fportname",
				"type": "text",
				"validation": "required"
			}]
}]
}

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.12
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : none
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v6.11.0
OS         : Windows 8.1
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 5.0.4

Thanks.

2

IMHO, there is too much going on in the dropdown. If you want an (ngModelChange) handler, you should lose the output binding on [ngModel], and it also seems very strange to me to have both ngModel binding and formControlName, so I would choose one or the other.

Furthermore, I would move the dropdown that controls which form is being displayed out of the form completely, so I guess that goes to getting rid of formControlName="type".

I don’t know if this makes sense for your app or not, but another option that may perform better is to have all of the forms in the template, and use an accordion-like construct to control their visibility.

1 Like
3

Thanks @rapropos . I removed ngModel and switched to ion-select. Problem gone.

best Regards. :slight_smile: