получение данных формы из формы, построенной с использованием JSON

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 ('длина массива init 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);