Checkbox showing previous value

Ionic Framework ionic-v3
#1

Hi, I am building a new app.

I am showing form in the loop. On next, I reset the value of the current item, the value is reset but the checkbox is still showing previous value. Data for the checkbox is almost the same.

HTML code :

<ion-content *ngIf="!preview " >
<div style=“margin-top:5%;” text-wrap >
<ion-label *ngIf=“form && form.sections[sectionNo].title” stacked style=“padding-left: 10px;font-size:15px;” text-center>{{form.sections[sectionNo].title| uppercase}}</ion-label>

<ion-list radio-group *ngIf="form.sections[sectionNo].type=='select'" [(ngModel)]="form.sections[sectionNo].response" (ngModelChange) = "nextField()">
  <ion-item *ngFor="let option of form.sections[sectionNo].data" >
    <ion-label>{{option | uppercase}}</ion-label>
    <ion-radio name="radio" [value]="option"></ion-radio>
  </ion-item>
</ion-list>

</div>
</ion-content>

TS file :

nextField() {
if(this.form.sections[this.sectionNo].response){
this.saveData(this.form.sections[this.sectionNo].response, this.sectionNo);
if(this.sectionNo < this.maxSections){
this.sectionNo ++;
this.form.sections[this.sectionNo].response = “”;
}
else{
if(this.screen) this.submitForm();
else this.preview = true;
}
}
else alert(“Please Select Value”);
}

Sample Data Format :

“sections”: [
{
“filename”: “front”,
“required”: “true”,
“data”: [
“Intact”,
“Scratched”,
“Dented”,
“Missing”
],
“type”: “select”,
“title”: “Hub”,
“response”: null
},
{
“required”: “true”,
“data”: [
“Intact”,
“Scratched”,
“Dented”,
“Missing”
],
“filename”: “front”,
“type”: “select”,
“title”: “Handle”,
“response”: null
},
{
“required”: “true”,
“data”: [
“Intact”,
“Scratched”,
“Dented”,
“Missing”
],
“filename”: “front”,
“type”: “select”,
“title”: “Speedometer”,
“response”: null
},
{
“required”: “true”,
“data”: [
“Intact”,
“Scratched”,
“Dented”,
“Missing”
],
“filename”: “left”,
“type”: “select”,
“title”: “Left Cover”,
“response”: null
},
{
“required”: “true”,
“data”: [
“Intact”,
“Scratched”,
“Dented”,
“Missing”
],
“filename”: “right”,
“type”: “select”,
“title”: “Right Cover”,
“response”: null
}
]

Code is working and data is coming correctly but in the preview, checkbox shows previously selected value while the value is nul.
Please help

#2

I use a WCF service for a backend. The way that I handle the ability to display null values is to add an object that represents a null value to the collection that populates the select.

You might be able to use null, I have to use 0 because of the handling of integer values in .net.

#3

thanks, but it is not working still checkbox is coming checked on previous value

Screenshot_20180915-130840
Screenshot_20180915-130840.jpg1080×1920 173 KB
Screenshot_20180915-130851

#4

It looks like you are binding the value property to the entire object as opposed to a value!

#5

Sorry, i didn’t get it. Can you explain more about it? I am new to this.

#6

I am sorry for my last answer, I had not had enough coffee.

Let me get my machine fired up and I will post some code from my project.

#7

Will do In Just a few

#8

I don’t believe that ion-radio supports an undetermined value. It is either checked or unchecked. Instead of using a null value, have you thought of setting it to false and handling whether or not the value should be set to null in your database based upon whether or not it is checked or not?

#9

i have added checked=“false” in html but still not working

#10

One of the most important programming mantras I have is “no overlaps in responsibility”, and you have three: a banana (ngModel) mapping, an (ngModelChange) handler, and then a checked attribute. Choose one, and eliminate all others.

#11

i have removed checked & ngModel attribute.
Now i am doing it from ionChange but still showing previous filled value if selection data is same

<ion-list radio-group *ngIf=“form.fields[fieldNo].type==‘select’” (ionChange) = “nextField($event)”>

<ion-item *ngFor=“let option of form.fields[fieldNo].data” >

<ion-label>{{option | uppercase}}</ion-label>

<ion-radio name=“radio” [value]=“option” ></ion-radio>

</ion-item>

</ion-list>

#12

Perhaps relevant.

#13

not helpful

data is like this

{
  "fields": [
    {
      "filename": "front",
      "required": "true",
      "data": [
        "Intact",
        "Scratched",
        "Dented",
        "Missing"
      ],
      "type": "select",
      "title": "Hub",
      "response": null
    },
    {
      "required": "true",
      "data": [
        "Intact",
        "Scratched",
        "Dented",
        "Missing"
      ],
      "filename": "front",
      "type": "select",
      "title": "Handle",
      "response": null
    },
    {
      "required": "true",
      "data": [
        "Intact",
        "Scratched",
        "Dented",
        "Missing"
      ],
      "filename": "front",
      "type": "select",
      "title": "Speedometer",
      "response": null
    },
    {
      "required": "true",
      "data": [
        "Intact",
        "Scratched",
        "Dented",
        "Missing"
      ],
      "filename": "left",
      "type": "select",
      "title": "Left Cover",
      "response": null
    },
    {
      "required": "true",
      "data": [
        "Intact",
        "Scratched",
        "Dented",
        "Missing"
      ],
      "filename": "right",
      "type": "select",
      "title": "Right Cover",
      "response": null
    }
  ]
}

if data is same in successive field the html show checked(checkbox is prefilled) but value is null.

#14