Question

我已经通过运行循环创建了一个表单，并且如果条件根据我在JSON中接收到的数据而定，那么所有字段都是使用这种方式动态创建的。

我尝试使用[(ngModel)]，但是如您所见，我正在动态创建字段，因此我无法创建唯一的[(ngModel)]。

{
    "status": "success",
    "message": "Form Successfully Fetched!",
    "newData": [
        {
            "languagePreference": "both",
            "formName": "New2",
            "ptFormName": "Nova2",
            "description": "New",
            "ptDescription": "Nova",
            "questions": [
                {
                    "isActive": "1",
                    "questionId": "2",
                    "elementId": "2",
                    "question": "Date",
                    "ptQuestion": "Encontro",
                    "fieldPlaceHolder": "",
                    "ptFieldPlaceHolder": "",
                    "isRequired": "false",
                    "elementSlug": "date",
                    "element_type": "input",
                    "orderNo": "1"
                },
                {
                    "isActive": "1",
                    "questionId": "1",
                    "elementId": "1",
                    "question": "A",
                    "ptQuestion": "Ab",
                    "fieldPlaceHolder": "",
                    "ptFieldPlaceHolder": "",
                    "isRequired": "true",
                    "elementSlug": "text",
                    "element_type": "input",
                    "orderNo": "2"
                }
            ],
            "companyId": 4,
            "company_id": 4,
            "createdAt": 1545990962117,
            "updatedAt": 1545991095532,
            "id": "5c25f3325ba1fe5848550da2",
            "formId": 3
        }
    ]
}

formdata.html（在ionic3中）以使该表单发布

<ion-list >
    <li *ngIf="language==='Portuguese'">
        <div class="formData" *ngFor="let formVal of formValues">
            <h5>{{formVal.formName}}</h5>
            <ion-item *ngFor="let form of formVal.questions" [(ngModel)]="fc"  >
                <ion-label stacked>{{form.question}} </ion-label>
                <ion-input *ngIf="form.elementSlug ==='text'" placeholder="{{form.fieldPlaceHolder}}" type="text" ></ion-input>
                <ion-input *ngIf="form.elementSlug ==='number'" placeholder="{{form.fieldPlaceHolder}}" type="number"></ion-input>
                <ion-input *ngIf="form.elementSlug ==='email'" placeholder="{{form.fieldPlaceHolder}}" type="email"></ion-input>
                <ion-input *ngIf="form.elementSlug ==='password'" placeholder="{{form.fieldPlaceHolder}}" type="password"></ion-input>
                <ion-textarea *ngIf="form.elementSlug ==='textarea'" placeholder="{{form.fieldPlaceHolder}}"></ion-textarea>
                <ion-select *ngIf="form.elementSlug === 'radio'">
                    <ion-option *ngFor="let option of form.options">{{option.optionLabel}}</ion-option>
                </ion-select>
                <ion-select *ngIf="form.elementSlug === 'checkbox'" multiple="true">
                    <ion-option *ngFor="let option of form.options">{{option.optionLabel}}</ion-option>
                </ion-select>

                <ion-input *ngIf="form.elementSlug ==='file'" placeholder="{{form.fieldPlaceHolder}}" type="file"></ion-input>
                <ion-datetime *ngIf="form.elementSlug ==='date'" placeholder="{{form.fieldPlaceHolder}}" type="Date"></ion-datetime>
            </ion-item>
        </div>
    </li>
</ion-list>

我无法将表单放入数组或对象

Answer 1

在.ts文件中创建一个数组，并在打印组件的循环内使用其索引。

<ion-list>
<li *ngIf="language==='Portuguese'">
  <div class="formData" *ngFor="let formVal of formValues">
    <h5>{{formVal.formName}}</h5>
    <ion-item *ngFor="let form of formVal.questions; let idx = index of submitedData">
      <ion-label stacked>{{form.question}} </ion-label>
      <ion-input *ngIf="form.elementSlug ==='text'" placeholder="{{form.fieldPlaceHolder}}" type="text" [(ngModel)]="submitedData[idx].answer"
        (click)="inputClick(form.questionId,idx)" ></ion-input>
      <ion-input *ngIf="form.elementSlug ==='number'" placeholder="{{form.fieldPlaceHolder}}" type="number" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)"></ion-input>
      <ion-input *ngIf="form.elementSlug ==='email'" placeholder="{{form.fieldPlaceHolder}}" type="email" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)"> </ion-input>
      <ion-input *ngIf="form.elementSlug ==='password'" placeholder="{{form.fieldPlaceHolder}}" type="password" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)"></ion-input>
      <ion-textarea *ngIf="form.elementSlug ==='textarea'" placeholder="{{form.fieldPlaceHolder}}" (click)="inputClick(form.questionId,idx)"></ion-textarea>



      <ion-select *ngIf="form.elementSlug === 'radio'" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)"
        >
        <ion-option *ngFor="let option of form.options" value="{{option.id}}">{{option.optionLabel}}</ion-option>
      </ion-select>



      <ion-select *ngIf="form.elementSlug === 'checkbox'" multiple="true" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)" >
      <ion-option *ngFor="let option of form.options" value="{{option.id}}">{{option.optionLabel}}</ion-option>
    </ion-select>

      <ion-input *ngIf="form.elementSlug ==='file'" placeholder="{{form.fieldPlaceHolder}}" type="file" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)"></ion-input>
      <ion-datetime *ngIf="form.elementSlug ==='date'" placeholder="{{form.fieldPlaceHolder}}" type="Date" [(ngModel)]="submitedData[idx].answer" (click)="inputClick(form.questionId,idx)"></ion-datetime>

    </ion-item>

现在我们首先必须在加载此页面之前分配一些索引因此，请运行for循环，然后在ts文件中推送如下所示的伪造数据

arrayLengthInit（）{ console.log（'数组长度初始化fun（）'）;

 for (var i = 0; i < 200; i++) {
      this.submitedData.push({ questionId: '', answer: '' });
    }

    console.log(this.submitedData);

  }

现在您可以使用JSON对象的长度来重新定义数组的长度

array.lenght=json object.length

现在在每个输入标签上调用一个函数来初始化qid并回答（如果要从JSON中获取它们）。使用上面说的（click）=“ inputClick（form.questionId，idx）

inputClick(qid, idx) {

    console.log("input click fired and get", "qid=", qid, "idx=", idx);
    this.submitedData[idx].questionId = qid;
    console.log(this.submitedData);
  }

提交后，请尝试尝试类似的操作

 buttonClick() {

    console.log('form values submitted', this.submitedData);

    this.DataFilter();


  }

在数据过滤器中过滤是否有空白字段

DataFilter() {
    console.log("data filtration started")
    for (let i = 0; i < this.submitedData.length; i++) {
      if (this.submitedData[i].answer =="") {


        delete this.submitedData[i];



      }

    }

    console.log('sorted array',this.submitedData)
    this.backpacker();
  }

，然后在后包装器（）中打包以交付

 backpacker() {

    console.log("i will pack it for you");
    var newArray:{};
    var lang:{}
    newArray={form_id: this.formValues[0].formId}


    if (this.formValues[0].languagePreference === "both") {
      if (this.language === "Portuguese") {
        newArray["AnswerLanguage"] = 'en';

      } else {
        newArray["AnswerLanguage"] = 'pt';
      }
    } else {
      newArray["AnswerLanguage"] = 'en';
     }



     newArray["answers"]=this.submitedData;



    console.log(newArray);

从使用JSON构建的表单中获取表单数据

1 个答案: