Submit a form when my input is checked Angular

Question

Hello everyone I am on rating-app component and i want to submit my form only if I have a notation checked ( 1,2,3,4,5 ) but i create all my input with an *ngFor so when i try to do it with *ngModel only an element is triggered and i don't understand why, if someone can help me it will be great !

this is my repo : https://github.com/qalimero/rating-app

My HTML :

 <main role="main">
  <div *ngIf="!display; then displayRate else displayResult"></div>
  <ng-template #displayRate>
    <div class="header-rating" role="heading">
      <fa-icon [icon]="faStar"></fa-icon>
      <h1>How did we do ?</h1>
    </div>
    <p class="text-body">
      Please let us know how we did with your support request. All feedback is 
      appreciated to help us improve our offering!
    </p>
    <form>
      <ul class="radio-wrapper">
        <li *ngFor='let radio of radios; let idx = index' [ngClass]="['radio']">
          <input [(ngModel)]="!isChecked" class="visually-hidden" id="rate_{{ idx }}" 
                 name="rate" type="radio">
          <label [ngClass]="['custom-checkbox']"
                 for="rate_{{ idx }}">{{ radio }}</label>
        </li>
      </ul>
      <button (click)="submitResult()" [disabled]="isChecked ===false" 
       type="button">SUBMIT</button>
    </form>
  </ng-template>
  <ng-template #displayResult>
    <div class="header-result">
      <img src="../../assets/images/illustration-thank-you.svg">
      <p class="resume-result">You selected 4 out of 5</p>
      <h2>Thank you!</h2>
      <p>We appreciate you taking the time to give a rating. If you ever need more 
         support, don’t hesitate to get in touch!
      </p>
    </div>
  </ng-template>
</main>

Ts :

import {Component} from '@angular/core';
import {faStar} from "@fortawesome/free-solid-svg-icons";

@Component({
  selector: 'app-rating-component',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.scss']
})
export class RatingComponent {
  display = false;
  faStar = faStar;
  radios = ['1', '2', '3', '4', '5'];
  isChecked = false;

  constructor() {

  }

  submitResult() {
    this.display = !this.display;
  }
}

Don't you want to do it with a FormArray which you can loop through in the HTML? — Sven Märki
– Sven Märki, Commented Aug 26, 2022 at 17:03
It's exactly what i want to do, loop through the HTML but i didn't know how to do it, thanks for your answer ! — Quentin Serda
– Quentin Serda, Commented Aug 26, 2022 at 17:05

Chris Hamilton · Accepted Answer · 2022-08-26 18:06:58Z

2

[(ngModel)] does not really support radio buttons properly. You can implement two way binding using [value] and (change) but it's not necessary.

The nature of radio buttons is that once one is selected, there will always be one selected. It is impossible for the user to deselect all members of the group. So you can just use the (change) callback, and set isChecked to true on the first change.

<li *ngFor='let radio of radios; let idx = index' [ngClass]="['radio']">
  <input (change)="isChecked = true" ... > // Remove ngModel
  ...
</li>

edited Aug 26, 2022 at 18:06

answered Aug 26, 2022 at 17:11

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

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

1 Comment

Quentin Serda Over a year ago

Thanks for you answer, i'll test that and i didn't know that '[(ngModel)]' didn't support radio buttons !

Collectives™ on Stack Overflow

Submit a form when my input is checked Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related