从 json 创建一个动态表单

Question

是否可以从具有类型属性的 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

我遇到了同样的问题，我尝试对不同的输入字段使用 ngSwitch 例如：

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

从 json 创建一个动态表单

create a dynamic form from a json

typescript

ionic2

angular