Check The Value Of A Radio Input

Contents hide

Problem Description:

I’m trying to check the value of a Radio input. If it’s ‘in’ or ‘cm’


<form (ngSubmit)="saveMeasurement()" #measurementForm="ngForm">
        <div class="input-group input-group-sm mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">Letter</span>
          </div>
          <input 
          type="text" 
          class="form-control"
          name="Letter"
          placeholder="A">
      </div>
      <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">in or cm</span>
          </div>
          <input 
          type="number" 
          class="form-control"
          name="measurementInput"
          step=".01"
          >

<div class="input-group-append">
     <span class="input-group-text">
           <input 
           type="radio"
           id="in"
           name="measurementType"
           value="in"
           [(ngModel)]="measurementModel.measurementType"
           checked
           >
           <label for="in">in</label>
           <input 
           type="radio"
           id="cm"
           name="measurementType"
           [(ngModel)]="measurementModel.measurementType"
           value="cm"
           >
           <label for="in">cm</label>
     </span>
</div>

If the value is ‘in’ I’ll convert the user input to inches and vise versa if it is ‘cm’

This is the closest of gotten to getting the value of the Radio input:

type:string = (<HTMLInputElement>document.getElementById("measurementType")).value;

And this is me trying to convert the user input into cm or in

When you hit the submit button it calls saveMeasurment method.
Which will subscribe to the createMeasurment method which is an http post request

checkType checks if the radio input value is ‘in’ or ‘cm’
if it’s ‘in’ createMeasurement and convertToCm is called
if it’s ‘cm’ createMeasurement and convertToIn is called
and it returns a measurement type I created.

convertToCm and convertToIn are methods with the conversion logic and returns a array of 2 numbers

createMeasurement just takes the returned array and some other information in the form and returns the measurement type I created

the createdMeasurment variable is the measurment that checkType returned.

checkType():Measurment{

    let measurement: any;
    
    if (this.type === 'in') {
      measurement = this.createMeasurement(this.convertToCm(this.measurementModel.measurementInput));}
    if (this.type === 'cm') {
      measurement = this.createMeasurement(this.convertToIn(this.measurementModel.measurementInput));
    }

    return measurement;
    
  }

  convertToCm(inches:number):number[]{
    let centimeters = inches/2.54;

    let measurements: number[] = [centimeters, inches];
    return measurements;
  }


  convertToIn(centimeters:number): number[]{
    let inches = centimeters *2.54;

    let measurements: number[] = [centimeters, inches];
    return measurements;
  }


  createMeasurement( measurements:number[]):Measurment{
    let letter = this.measurementModel.measurmentLetter;
    // measurements[0] = this.measurementModel.measurmentCm;
    // measurements[1] = this.measurementModel.measurmentIn;

    return new Measurment(letter, measurements[0],measurements[1]);
  }

  createdMeasurment = this.checkType();


  saveMeasurement(){
    if(this.measurmentId == -1){
      this.measurementService.createMeasurement(this.createdMeasurment).subscribe(
        data =>{
          console.log(data)
        }
      )
    }
  }

}

Solution – 1

You has the value in measurementModel.measurementType. It’s knowed as two binding way

BTW

You can change your .html and pass to the function saveMeasurement
the form

<form #measurementForm="ngForm" 
     (ngSubmit)="saveMeasurement(measurementForm)" >
...
</form>

  saveMeasurement(form:NgForm)
  {
    console.log(form.value)
  }

When we want to do "something more" when change, gerenally you can
split [(ngModel)] in [ngModel] (ngModelChange) in the way
```
<input ... [ngModel]="measurementModel.measurementType"
           (ngModelChange)="measurementModel.measurementType=$event;
                            doSomething($event)"
      >

 doSomething(value:string)
 {
     console.log(value)
 }
```
(I like equal the variable in the .html and call the function
instead of the simply call the function and equal the variable to
the function because, for me, it’s more clear)

Rate this post