Dynamic radio value post [Please Solve ASAP] ionic 2


#1

i have created a form with the yes or no radio check, if the user select no he has to give description (remark) and that description with yes or no radion check information has to post to API.
show how to post multiple check value and remark value to server please help.

show below example of my code

Plnkr Link

Home.html

  <ion-list >

      <ion-item-group *ngFor="let group of arrayData;let i=index;">

        <ion-item-divider sticky style="background: #7ec9a2">
          <ion-label style="color:#fff;font-size: 13px !important;">
            {{group.name}}
          </ion-label>
        </ion-item-divider>
              <div class="padding-question" *ngFor="let quetion  of group.inspectionCheckList;let j=index;" >
                  <p>{{quetion.name}}</p>
                  <ion-row radio-group formControlName="quetionsRadio" >
             <ion-col col-4 no-padding no-margin>
        <ion-item >
            <ion-label text-right>Yes</ion-label>
             <ion-radio (click)="datachanged(i,j,1)" value="1" ></ion-radio>
        </ion-item>
    </ion-col>
     <ion-col col-4 no-padding no-margin>
        <ion-item>
            <ion-label text-right>No</ion-label>
             <ion-radio (click)="datachanged(i,j,0)" value="0"></ion-radio>
        </ion-item>
    </ion-col>
     <ion-col col-4 no-padding no-margin>
        <ion-item>
            <ion-label text-right>N/A</ion-label>
             <ion-radio (click)="datachanged(i,j,2)" value="2"></ion-radio>
        </ion-item>
    </ion-col>
</ion-row>
     <ion-item  [hidden]="!(inputBar ==i && subInputBar == j && selectOption ==0)">
<ion-label floating>Remarks</ion-label>
<ion-input type="text"  ></ion-input>
    </ion-item>
 </div>
           </ion-item-group>

    </ion-list>
      <ion-row style="padding: 0px;" class="buton-padding">
      <ion-col class="submit-col">
        <button ion-button class="submit-btn" (click)="onsubmitfrm()"  full type="submit" >Submit</button>
      </ion-col>
    </ion-row>

Home.ts

import { NavController } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";
@Component({
    templateUrl: "home.html"
})
export class HomePage {
    inputBar: any;
    subInputBar: any;
    selectIndex: any;
    selectOption: any;
    greeting: string;
   radioValue: any=[];
  radioCheckValue: any=[];
    arrayData = [
        {
            "groupId": 1,
            "name": "Incorporation of A Company & Matters Incidental Thereto",
            "inspectionCheckList": [
                {
                    "id": 1,
                    "name": "Alteration of Articles",
                    "displayOrder": 1
                },
                {
                    "id": 2,
                    "name": "Change of Name",
                    "displayOrder": 2
                },
                {
                    "id": 3,
                    "name": "Increase or Consolidation of share capital",
                    "displayOrder": 3
                },
                {
                    "id": 4,
                    "name": " Reduction of share capital",
                    "displayOrder": 4
                }
            ]
        }, {
            "groupId": 3,
            "name": "STATUTORY RECORD AND INSPECTION",
            "inspectionCheckList": [
                {
                    "id": 41,
                    "name": "Statutory record and inspection",
                    "displayOrder": 37
                },
                {
                    "id": 42,
                    "name": "a. Register of buy-back of shares",
                    "displayOrder": 38
                },
                {
                    "id": 43,
                    "name": "b. Register of transfers",
                    "displayOrder": 39
                },
                {
                    "id": 44,
                    "name": "c. Register of Charges",
                    "displayOrder": 40
                },
                {
                    "id": 45,
                    "name": "d. Register of inter-corporate loans",
                    "displayOrder": 41
                },
                {
                    "id": 46,
                    "name": "e. Register of inter-corporate investments",
                    "displayOrder": 42
                },
                {
                    "id": 47,
                    "name": "f. Register of contracts in which directors are interested",
                    "displayOrder": 43
                },
                {
                    "id": 48,
                    "name": "g. Register of directors",
                    "displayOrder": 44
                },
                {
                    "id": 49,
                    "name": "h. Register of directors shareholding",
                    "displayOrder": 45
                }
            ]
        },
        {
            "groupId": 4,
            "name": "OTHERS",
            "inspectionCheckList": [
                {
                    "id": 50,
                    "name": "\tOTHERS",
                    "displayOrder": 46
                }
            ]
        }];
    constructor(private nav: NavController) { }
    goToPage1() {
        this.nav.push(Page1);
    }

    datachanged(indexQ, indexI, option) {
        console.log('indexQ', indexQ);
        console.log('indexI', indexI);
        console.log('option', option);
        if (option == 0) {
            this.inputBar = indexQ;
            this.subInputBar = indexI;
            this.selectOption = option;
        } else {
            this.inputBar = -1;
            this.subInputBar = -1;
            this.selectOption = -1;
        }
    }
}
  onsubmitfrm() {
        console.log('radioValue',this.radioValue);
         console.log('radioCheckValue',this.radioCheckValue);
        for(let i=0;i<this.radioCheckValue;i++){
           if(this.radioCheckValue[i] == '0'){
               this.radioValue[i]
           }
        }

    }

#2

Maybe somebody else can help you, but please read what you have written. Is the code readable? Is it clear what you are asking? Do you really consider “Please Solve ASAP” to be an appropriate thing to request of volunteers?


#3

@rapropos i already mention plnkr link for full code please check my code using below link

http://embed.plnkr.co/0hkOXiht30Mlk5wnQfyK/


#4

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.


#5

hey @Sujan12 you may check my full code on Plunker

http://embed.plnkr.co/0hkOXiht30Mlk5wnQfyK/


#6

please anyone help me thanks