Angular 13 Input Radio checked condition not working

Question

I save in localstorage selectedKitchenId, and checked or selectedKitchenId === kitchen.id, if true selected radio. Dont understand why not working checked conditions, i try strong tag display the same check everything works. Tell me what could be the reason

        <div class='row'>
          <div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'>

            <div class="form-check form-check-inline">
              <label class="form-check-label" for="{{kitchen.id}}">
                <div class='kitchenTypeBg'>
                  <img src='{{kitchen.src}}' alt='' class='p-1 align-middle'>
                </div>
              </label>
              <input
                [checked]="selectedKitchenId === kitchen.id"
                formControlName="kitchenType"
                [value]='kitchen.id'
                class="form-check-input" type="radio" id="{{kitchen.id}}"
              >
              <strong>{{selectedKitchenId === kitchen.id}}</strong>
            </div>
          </div>
        </div>

Have you tried to add a name for the input? make It unique

Aviv Ben Shahar
– Aviv Ben Shahar

2022-01-18 00:11:35 +00:00
Commented Jan 18, 2022 at 0:11 — Aviv Ben Shahar
– Aviv Ben Shahar, Commented Jan 18, 2022 at 0:11
I wrote name like this formControlName="kitchenType"

Arthur
– Arthur

2022-01-18 00:15:10 +00:00
Commented Jan 18, 2022 at 0:15 — Arthur
– Arthur, Commented Jan 18, 2022 at 0:15
Yeah, I meant native name, like [name]="kitchen.id"

Aviv Ben Shahar
– Aviv Ben Shahar

2022-01-18 00:16:04 +00:00
Commented Jan 18, 2022 at 0:16 — Aviv Ben Shahar
– Aviv Ben Shahar, Commented Jan 18, 2022 at 0:16
formControlName="kitchenType" when i delete then it works

Arthur
– Arthur

2022-01-18 00:19:39 +00:00
Commented Jan 18, 2022 at 0:19 — Arthur
– Arthur, Commented Jan 18, 2022 at 0:19
OK, then delete it 🙆‍♂️

Aviv Ben Shahar
– Aviv Ben Shahar

2022-01-18 00:20:29 +00:00
Commented Jan 18, 2022 at 0:20 — Aviv Ben Shahar
– Aviv Ben Shahar, Commented Jan 18, 2022 at 0:20

Aviv Ben Shahar · Accepted Answer · 2022-01-18 00:49:14Z

     <form #f="ngForm" (ngSubmit)='goToNextStep(f.form)'>
        <div *ngIf="submitted && f.invalid">
           <span class='text-center'>Required form</span>
        </div>
        <div class='row'>
          <div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'>

            <div class="form-check form-check-inline">
              <label class="form-check-label" [for]="kitchen.id">
                <div class='kitchenTypeBg'>
                  <img [src]='kitchen.src' alt='' 
                       class='p-1 align-middle'>
                </div>
              </label>
              <input
                name="kitchenType"
                [checked]="selectedKitchenId === kitchen.id"
                [value]='kitchen.id'
                class="form-check-input" 
                type="radio" 
                [id]="kitchen.id"
              >
              <strong>{{selectedKitchenId === kitchen.id}}</strong>
            </div>
          </div>
        </div>
        <div class="d-grid">
          <button type="submit" 
          class="btn-block btn 
                 btn-outline-light 
                 buttonNext mx-auto mt-4 w-50">
            Tęsti
          </button>
          <button
            [routerLink]="['/']"
            class='btn btn-block mx-auto buttonBack'>
            <i class="bi bi-arrow-left"></i>
            Grižti
          </button>
        </div>
      </form>

This is how easy template-driven is

Fixed some best-practices for you

To get the values, just use like this on TS file:

goToNextStep(form) {
   const {kitchenType} = form.values
}

Thank you for help! <3, i just FormControl pass value it work :)

Arthur · Accepted Answer · 2022-01-18 00:46:55Z

0

It worked for me, Form Control pass value. How is it done here link

    // Get selected Kitchen id
    this.selectedKitchenId =
      this.persistenceService.get('selectedKitchenId') ?? null;


  initializeForm(): void {
    this.form = this.formBuilder.group({
      kitchenType: new FormControl(this.selectedKitchenId, Validators.required),
    });
  }

answered Jan 18, 2022 at 0:46

Arthur

5235 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 13 Input Radio checked condition not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related