Printing the values of Radio Groups, Checkboxes, and select option items on console

[ilsakamran]

Hi! i am quite new to ionic angular projects and i have tried so much but i am not able to print “THE RIGHT VALUES” on console from my code.

I am also new to coding and i know this might sound silly but i can’t find any “RIGHT” answers to this on internet.
SO please bear with me.

thanks in advance

[rapropos]

Step 1: Go through the Angular forms documentation. Emulate the idioms therein.
Step 2: Post the relevant code you are running.
Step 3: Describe in detail that would be comprehensible to somebody totally unfamiliar with your business domain what constitutes “the right values”.
Step 4: Explain how what you are seeing differs from what is desired in step 3.

[ilsakamran]

Thank you for your quick reply… but there is nothing i can find from the documentation i have read it and i have applied all the steps mentioned there. My question is really basic…

This is the typescript where i need help

My html code

I want the values for my radio button group, checkbox and select menu option value…
but as i have printed the text value on console i cant seem to find the right code for dispaying others.

[rapropos]

Post textual information as text, not images. I am not seeing either step 3 or 4, and despite your original question speaking of failure to print “the right value” (still not defined so anybody other than you can know what you mean) on console, there is no console logging code posted.

[ilsakamran]

Ok, thanks for the guideline… I will try my best to elaborate my questions now on. And my initial problem has been resolved now,
For any newbie like me… here is my html code to really basic ionic form, which reads the runtime values on console

<ion-app>

  <ion-header [translucent]="true">
    <ion-toolbar>
      <ion-title>
        Basic Form
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <form [formGroup]="ionicForm" (ngSubmit)="submitForm()" novalidate>
      <!--------text input----->
      <ion-item lines="full">
        <ion-label position="floating">Name</ion-label>
        <ion-input formControlName="Name" type="text"></ion-input>
      </ion-item>
     
<!-- Radio buttons -->
      <ion-radio-group  formControlName="gender" lines="full">
        <ion-list-header>
          <ion-label>Gender</ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>Male</ion-label>
          <ion-radio slot="start" value=male></ion-radio>
        </ion-item>
       
        <ion-item>
          <ion-label>Female</ion-label>
          <ion-radio slot="start" value=female></ion-radio>
        </ion-item>
      </ion-radio-group>

      <!-- Checkbox -->
      <ion-item>
        <ion-label >Is Active</ion-label>
        <ion-checkbox formControlName="IsActive" vlaue=boolean ></ion-checkbox>
      </ion-item>

      <!-- Dropdown-->
      <ion-item>
        <ion-label>Class</ion-label>
        <ion-select formControlName="Class" [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select Class">
          <ion-select-option value="11">11</ion-select-option>
          <ion-select-option value="12">12</ion-select-option>
        </ion-select>
      </ion-item>

<ion-row>
        <ion-col>
          <ion-button color="danger" type="submit" expand=full>Submit</ion-button>
        </ion-col>
      </ion-row>
    </form>
  </ion-content>

</ion-app>

and this is my typescript code

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  ionicForm: FormGroup;

  constructor(public formBuilder: FormBuilder) {}

  ngOnInit() {
    this.ionicForm = this.formBuilder.group({
      Name: [''],
      gender: [],
      IsActive: [],
      Class: []
    })
  }

  customPopoverOptions: any = { 
    header: 'Select Class'
  };

  submitForm() {
      console.log(this.ionicForm.value)
    }
}