Validation not working for radio button in angular - html

Question

Validation not working for radio button in Angular.
When radio button is not selected, form is getting submitted.
Also not showing error.
HTML Code
<form [formGroup]="feedbackFormWithArray" (ngSubmit)="submitData()">
<table class="res-tbl">
<tbody formArrayName="skills" class="tbl">
<tr class="skill-tr table-data" *ngFor="let skill of skills; let i = index">
<td class="table-data res-td tbl-border skill-td">
<b value="skill.skillId"><span class="text-danger">*</span>{{skill.skillName}}<span>:</span></b><p class="skill-description-p"> {{skill.skillDescription}}</p>
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="3" />
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="2" />
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="1" />
</td>
</tr>
</tbody>
<div *ngIf="(submitted && skills.invalid)">
<small *ngIf="skills.errors?.required" class="text-danger">Please select Skills</small>
</div>
</table>
<Button type="submit" [disabled]="feedbackFormWithArray.invalid" class="btn button-btn" >{{feedbackId ? 'Update' : 'Create'}}</Button>
</form>
TS Code
import { Validators } from '#angular/forms';
submitted : boolean = false;
this.feedbackFormWithArray= this.fb.group({
skills: this.fb.array(
this.skills.map((t) => {
this.fb.control(t);
}), {validators: Validators.required}
)
});
submitData() {
this.submitted = true;
}
How to solve this?
Thank you!

Answer 1

I am gonna guess you have a button inside your form, something like:
component.html
<button (click)="submitData()">Submit</button>
You could add a check to change submitted state like
submitData() {
if (this.feedbackFormWithArray.valid) {
this.submitted = true;
}
if (this.feedbackFormWithArray.invalid) {
// Do something like this.tryToSubmitWithError = true
// Popup to say you cannot submit
// ...
}
}
I think also you wanted to use feedbackFormWithArray instead of skills in the *ngIf below:
<div *ngIf="(submitted && skills.invalid)">
<small *ngIf="skills.errors?.required" class="text-danger">Please select Skills</small>
</div>
That could be like:
<div *ngIf="tryToSubmitWithError && feedbackFormWithArray.invalid">
<small *ngIf="feedbackFormWithArray.errors?.required" class="text-danger">
Please select Skills
</small>
</div>