Angular -How to get radio button values from user input form?-CodePudding

I'm trying to get values of three options from user input form: first one is select option, which is working, third one is timepicker which is working, and second one is radio button group of two buttons to which i don't know to give value and get the same based on which button is selected. To make it clearer i will post SS here.

This is whole HTML form:

<div >
    <div  id="home" role="tabpanel" aria-labelledby="home-tab">
      <form [formGroup]="eKotlarnica" id="eKotlarnica" (ngSubmit)="onSubmit()">
        <div >
          <div >
            <div >
              <select  formControlName="lozac">
                <option selected disabled>--Изаберите ложача--</option>
                <option value="Пера">Пера</option>
                <option value="Мика">Мика</option>
                <option value="Жика">Жика</option>
              </select>
            </div>
            <div >
              <div formControlName="broj"  data-toggle="buttons">
                <label >
                  <input type="radio" name="options" id="option1" value="Једна лопата">
                  <img src="/assets/images/1 lopata.png" alt="Option 1" width="50" height="50">
                </label>
                <label >
                  <input type="radio" name="options" id="option2" value="Две лопате">
                  <img src="/assets/images/2 lopate.png" alt="Option 2" width="50" height="50">
                </label>
              </div>
            </div>
            <div >
              <label for="vremeLozenja">Унесите време ложења</label>
              <input type="time" id="vremeLozenja" formControlName="vreme">
            </div>
            <button  type="submit">Додај</button>
          </div>
        </div>
      </form>

This is where i got in app.ts: Ignore the filter, that is under second tab on page.

@Component({
  selector: 'main',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  
})
export class AppComponent {
  title = 'lozana';

  data:any[]= []
  filteredData:any[] = []
    
    eKotlarnica = this.formBuilder.group({
      lozac: '',
      broj: '', 
      vreme:'',
    })
    constructor(
      private formBuilder: FormBuilder,
    ) {}
    
    onSubmit(): void {
      console.warn('Kotao je nalozen', this.eKotlarnica.value);
      this.data.push(this.eKotlarnica.value);
      this.filteredData = this.data;
      this.eKotlarnica.reset();
    }
    onChange(event: any ) {
      this.filterLozac(event.target.value);
      console.log(event.target.value);
    }
    filterLozac(imeLozaca: any){
        this.filteredData = this.data.filter(function(red){
        console.log(red);
        return imeLozaca == red.lozac;
      })
    }

  }

Not sure what should i do, i'm new to this.

CodePudding user response：

Move the formControlName="broj" from <div> element and place in the radio button control. You need to remove the name attribute from the radio button as well.

<div  data-toggle="buttons">
  <label >
    <input
      type="radio"
      id="option1"
      value="Једна лопата"
      formControlName="broj"
    />
    <img
      src="/assets/images/1 lopata.png"
      alt="Option 1"
      width="50"
      height="50"
    />
  </label>
  <label >
    <input
      type="radio"
      id="option2"
      value="Две лопате"
      formControlName="broj"
    />
    <img
      src="/assets/images/2 lopate.png"
      alt="Option 2"
      width="50"
      height="50"
    />
  </label>
</div>

Demo @ StackBlitz

Reference

RadioControlValueAccessor