Question

是否可以从具有type属性的json文件创建动态表单，并根据收到的属性显示表格??

我找到了一个效果很好的代码，但是如果有一天我收到一个新元素，那么我必须回到代码中添加一个条件

 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>

Answer 1

是的，你可以这样做。

让我们调用你的JSON变量data。首先创建一个反应形式：

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

接下来，获取JSON对象的键：

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

最后，制作相应的模板

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

这当然仅适用于字符串字段。根据您的需要调整此代码。

Answer 2

我遇到了同样的问题，并且尝试将@Override public int getItemCount() { return nameArray.sizes() }用于不同的输入字段，例如：

ngSwitch

从json创建一个动态表单

2 个答案: