How to apply if else condition for button in ionic


#1

Hi everyone.
I am trying to create a delete form.
Now i want user with two choices like if they choose yes radio button then they must be be directed to transfer account page ,but if they select no , the account should be deleted.


Here is this image,I want if the user selects yes and clicks submit button he should be directed to transfer page else account should be deleted.
In my case till now it is deleting in both the case,and also when nothing is selected.
Please help me in this.


#2

Here’s my code of delete button:

deleteaccount(){
 let key = this.delete.value.name;
    this.store.delete(key);
  alert("Account created");
}

and radio buttons:-

<input type="radio" ng-model="account.yes " name="yes"> YES <input type="radio" ng-model="account.no" name="yes"> NO

How to apply if -else condition here?

I tried:

if(this.account.no==checked)
{
this.navctrl.push(TransferPage);
}
else
{
 let key = this.delete.value.name;
    this.store.delete(key);
  alert("Account created");
}

but it does not work ,Guide me where I am wrong.
Thanks in advance.


#3
if(this.account.yes.checked==true)
{
this.navctrl.push(TransferPage);
}
else
{
 let key = this.delete.value.name;
    this.store.delete(key);
  alert("Account created");
}

#4

Hello,

It’s because you’re almost there, but have a slightly wrong approach. For that, best way is to use *ngIf on the template view (html) and validators in (ts file). I try to work your code…

page.ts

deleteaccount(){

if (this.deleteConfirmed !== undefined) {

 let key = this.delete.value.name;
    this.store.delete(key);
  alert("Account created");

}

page.html

<ion-input type="radio" [(ngModel)]="deleteConfirmed" name="yes">

should work better :slight_smile:


#5

One doubt ,for both the radio buttons should name and ng-model be same?

or it should be like??

<ion-input type="radio" [(ngModel)]="deleteConfirmed " name="yes"> <ion-input type="radio" [(ngModel)]="deleteConfirmed " name="no">


#6

I am getting error here:
Please help:-


#7

@vithika it should do, but as we use ngModel, name is secondary, as we’ll receive the value of ngModel in controller. Put it like this please:

<ion-input type="radio" [(ngModel)]="deleteConfirmed" name="yes"> <ion-input type="radio" [(ngModel)]="deleteRefused" name="no">

and in contoller file, declare them both before the constructor at your line 23:

deleteConfirmed: string;
deleteRefused: string;

Clean the white spaces in "deleteConfirmed " and "… Refused too.

Almost there :slight_smile:


#8

Please don’t post screenshots of text.

If I am your user, I am mad at you for having to do two operations instead of one. Instead of radio buttons, I would rather see two action buttons.


#9

Yeah well, I guess an AlertController would be easier too, but I guess Vithika is using a radio button for a reason.


#10

I am getting error: ngmodel cannot be used to register form controls with a parent formGroup directive.


#11

Should i use formControlname=deleteconfirmed instead


#12

@vithika it’s because you have no formcontrol declared on the buttons (should be <ion-input type="radio" [(ngModel)]="deleteConfirmed" name="yes" formControlName="yesbutton">. But if you start with that, I suggest you comment (//) the form validators.
Plus, there is not much use to validate a radio button with yes or no value. And as we have data binding, it will fill the value anyways when you submit with yes or no.

Now to help you debugging, I suggest you rewrite a bit your code:

<form [formGroup]="accountForm" (ngSubmit)="deleteaccount()">
<ion-input type="radio" [(ngModel)]="deleteConfirmed " name="yes"> <ion-input type="radio" [(ngModel)]="deleteConfirmed " name="no">
<button ion-button type="submit">Do something</button>
</form>
deleteaccount(){
console.log(accountForm.value):

// and temporarily comment out the rest just to check values with console.log when you click button

/* 

if (this.deleteConfirmed !== undefined) {

 let key = this.delete.value.name;
    this.store.delete(key);
  alert("Account created");

}

*/

you will also need to declare accountForm : any; around line 23

hope it helps


#13

I tried the same but getting error:caanot find control with name:yes


#14

Please see this:


#15

Ok delete both formControlName of your radio inputs now,
and delete or comment line 30;
should do

forms can be a pain, especially if this is your first task in TS/Ionic :stuck_out_tongue:


#16

Getting the error:


#17

uncomment line 29 only in .ts file, even if it crashes again you should have some log in browser now


#18

still getting the error:



#19


#20

Well if you want, we could chat a bit on the ionic slack or something, I know what’s wrong, but this is hard on forum message like that (https://ionic-worldwide.slack.com). Feel free to Private message me (digifran). But I’ll have to go in 30 minutes.