How to bind radio buttons in Reactive Forms?

[cevhyruz]

I am trying to get the value of every category in the form group name rating.
here is my form group:

  feedbackForm = this.#fb.group({
    comment: ['', Validators.required],
       type: ['', Validators.required],
     rating: this.#fb.group({
             courtesy: ['', Validators.required],
        systemProcess: ['', Validators.required],
           promptness: ['', Validators.required],
             adequacy: ['', Validators.required],
       responsiveness: ['', Validators.required],
    }),
  });

I am currently doing this:

      <div formGroupName="rating">
        @for (category of ratingCategory; let i = $index; track $index ) {
          <label cLabel><h6>{{ category | titlecase }}</h6></label>
          @for(rating of ratingOptions; let index = $index; track $index) {
          <c-form-check>
            <input cFormCheckInput
              [id]="category + index"
              [name]="category"
              type="radio" />
            <label cFormCheckLabel
              [for]="category + index">
              {{ rating }}
            </label>
          </c-form-check>
          }
        }
      </div>

this is working fine as it is however, adding a formControlName directive directly in the <input> messes up the radio buttons targeting, am I missing something?

[cevhyruz]

nvm I got it working 😸