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