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

Question

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 class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <form [formGroup]="eKotlarnica" id="eKotlarnica" (ngSubmit)="onSubmit()">
        <div class="container-fluid">
          <div class="row dark bg-warning">
            <div class="col">
              <select class="lozac" formControlName="lozac">
                <option selected disabled>--Изаберите ложача--</option>
                <option value="Пера">Пера</option>
                <option value="Мика">Мика</option>
                <option value="Жика">Жика</option>
              </select>
            </div>
            <div class="col">
              <div formControlName="broj" class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-warning">
                  <input type="radio" name="options" id="option1" value="Једна лопата">
                  <img src="/assets/images/1 lopata.png" alt="Option 1" width="50" height="50">
                </label>
                <label class="btn btn-warning">
                  <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 class="col">
              <label for="vremeLozenja">Унесите време ложења</label>
              <input type="time" id="vremeLozenja" formControlName="vreme">
            </div>
            <button class="btn btn-warning" 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.

Yong Shun · Accepted Answer · 2022-11-11 01:05:28Z

0

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 class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-warning">
    <input
      type="radio"
      id="option1"
      value="Једна лопата"
      formControlName="broj"
    />
    <img
      src="/assets/images/1 lopata.png"
      alt="Option 1"
      width="50"
      height="50"
    />
  </label>
  <label class="btn btn-warning">
    <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

answered Nov 11, 2022 at 1:05

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related