Posting data using http request

Ionic Framework ionic-v3
1

Bellow written is a dynamic form being bult using JSON i want to add a submit button to it.

<ion-item *ngFor="let form of formVal.questions">
    <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>

on submittion the data will again be sent via http request . i am naive plz explain in detail

2

Ramashish,

One good place to start is the documentation. https://ionicframework.com/docs/developer-resources/forms/ this one should help you to build the form correctly and with the submit button. once you have it in a provider https://www.joshmorony.com/how-to-send-data-with-post-requests-in-ionic-2/ this will help you to make the http request. Google is also your friend, read this and if you have a doubt after post here and the community will help :smiley:

3 
JSON for Form-

{
  "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
    }
  ]
}

using this JSON i am running loop to print the forms as per requirement set into JSON
but The Official documentation is not helpin as i can not define Unique [(ngModel)] for every element plz guide.

the loop can be seen bellow

<ion-item *ngFor="let form of formVal.questions">
    <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>