CODEWITHSUNDEEP
angulartypescriptionic2
Youssef Dahmane Jdid
Youssef Dahmane Jdid

Reputation: 21

create a dynamic form from a json

is it possible to create a dynamic form from a json file with type properties, and display the form according to the properties received ??

I found a code that works well but it does not seem effective if one day I receive a new element is that I have to go back in the code to add a condition

 var finalj = JSON.parse(json);
                      console.log(finalj.schema.customer);

                     /* var property;
                      for ( property in finalj.schema["customer"] ) {
                        console.log( property ); 
                        if (property == "lastname"  ){

                          this.lastname= true;

                        } else if (property == "firstname" ){
                            this.firstname=true;

                        }
                        else if (property == "phone" ){
                          this.phone=true;

                      }
                      }
                      var property;
                      for ( property in finalj.schema["address"] ) {
                        console.log( property ); 
                        if (property == "address1"  ){

                          this.address1= true;

                        } else if (property == "city" ){
                            this.city=true;

                        }
                        else if (property == "postcode" ){
                          this.postcode=true;

                      }
                      }

 <ion-item *ngIf="lastname">
            <ion-label color="primary" fixed>Last name :</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>

          <ion-item *ngIf="firstname">
            <ion-label color="primary" fixed>First name :</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>
          <ion-item *ngIf="phone">
            <ion-label color="primary" fixed>Téléphone :</ion-label>
            <ion-input type="tel" placeholder="Tel Input"></ion-input>
          </ion-item>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
         Adresse Client :
        </ion-card-header>
        <ion-card-content>
          <ion-item *ngIf="address1">
              <ion-label color="primary" fixed>Address :</ion-label>
            <ion-textarea placeholder="Ligne 1"></ion-textarea>
          </ion-item>
          <ion-item *ngIf="city" >
            <ion-label color="primary" fixed>Ville :</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>
          <ion-item *ngIf="postcode">
            <ion-label color="primary" fixed>Code Postale :</ion-label>
            <ion-input type="number" value=""></ion-input>
          </ion-item>

Upvotes: 1

Views: 3911

Answers (2)

Nick
Nick

Reputation: 31

I had the same issue, and I tried to use angSwitch for different input fields for example:

<div *ngSwitch="JSon.Type">
    <div *ngSwitchCase ="input">
        ...
    </div>
    <div *ngSwitchCase ="radio">
        ...
    </div>
</div>

Upvotes: 0

user4676340
user4676340

Reputation:

Yes you can do this.

Let's call your JSON variable data. Start by creating a reactive form : 

this.form = this.formBuilder.group(this.data);

Next, get they keys of your JSON object : 

get keys() { return Object.keys(this.data); }

Finally, make the corresponding template

<form novalidate [formGroup]="form">
  <input type="text" *ngFor="let key of keys" formControlName="{{ key }}">
</form>

This of course works for string fields only. Adapt this code to your need.

Upvotes: 3

Related Questions