Hey there, I am currently working on implementing a Reactive Form and facing an issue with fetching values from checkboxes. It seems that only the value of the first checkbox selected is being recognized while the others are not. Below is the snippet of my code:
Component.ts
registerForm: FormGroup;
builder(
private Restservice: RestserviceService,
private route: ActivatedRoute,
private router: Router,
private formBuilder: FormBuilder
) {
this.registerForm = this.formBuilder.group ({
text: [""],
checkArray: [""],
radiobutton: [""],
array: [""],
list: [""],
archive: [""],
date: [""],
numeric: [""],
CommonData: [""],
});
}
// Displaying the Form values
submit () {
if (this.registerForm.valid) {
console.log ("complete", this.registerForm.value);
}
else {
alert ("FILL ALL FIELDS");
}
}
I am using primeng's p-checkbox in the HTML section but unfortunately, it's only recognizing the first selected value and ignoring the rest.
Html.
<div *ngIf="p.codigo_tipopreguntas == 2">
<ng-container *ngFor="let v of valores; let i=index">
<div *ngIf="p.id === v.codigo_pregunta">
<p-checkbox value="{{v.preguntas_valor}}"
label="{{v.preguntas_valor}}" formControlName="checkbox"></p-checkbox>
</div>
</ng-container>
</div>
<button class="btn btn-info btn-just-icon btn-round btn-link" pTooltip="Guardar" tooltipPosition="top"
(click)="submit()">
<i class="material-icons">remove_red_eye</i>
</button>