EDIT: Fixed it! My issue was simply to declare the [value]=“challenge” in the correct place - in this example I needed to declare it inside the ion-radio HTML tag. If anyone else is new to Ionic/Angular and is getting stuck with this: make sure the [value] tag lies inside an actual form-type-thing, i.e. textfield, password field, radio-button, checkbox etc.
I have been trying (hopelessly) to take a value from a radio-list form and return its name on another page. Currently I am not really getting an error - rather the challenge object does not seem to be getting passed to the other page at all! All the objects in the array list are listed using their names and it is the name that I need to pass to the other page. Here is my HTML:
<form [formGroup]="challengeForm" (ngSubmit)="logchallengeForm(form)">
<ion-list radio-group formControlName="challenge" name="radio" >
<ion-list-header>OR SELECT FROM THE LIST:</ion-list-header>
<ion-item *ngFor="let challenge of challengeList">
<ion-label >{{challenge.name}}</ion-label>
<ion-radio (ionSelect)="select(challenge)" ></ion-radio>
</ion-item>
<button ion-button full color="primary" type="submit">Save challenge</button>
</ion-list>
</form>
Here is how I declared the FormGroup in the constructor:
this.challengeForm = formBuilder.group({
challenge: ['']
});
And here is my logChallengeForm(form) method:
logOcaChallengeForm(form){
this.challengeProvider.addChallenge(this.challengeForm.value.challenge);
this.navCtrl.push(ChallengePage);
}
The addChallenge method in the provider literally just pushes the given object into an array.
Definitely part of the problem is that I am unable to find and adapt other peoples’ forms from the internet! They all seem to be using slightly different versions of Ionic/Angular/TypeScript/JS which, with my lack of experience, I am getting confused over. Can anyone spot what I’m doing wrong? Thanks!
