Struggling with passing an array from poll-vote.component.ts to poll-vote.component.html. The data involves radio buttons and I'm using ngFor loop with index, but it's not working as expected:
Here is my poll-vote.component.ts code:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-poll-vote',
templateUrl: './poll-vote.component.html',
styleUrls: ['./poll-vote.component.scss'],
})
export class PollVoteComponent implements OnInit {
pollvoteForm: FormGroup;
Options: ['Monday', 'Tuesday', 'Wednesday'];
constructor(private fb: FormBuilder) {
this.pollvoteForm = this.fb.group({
selection: this.fb.control('', [Validators.required]),
});
}
ngOnInit(): void {}
submitForm() {
console.log(this.pollvoteForm.value);
}
}
This is the code snippet for poll-vote.component.html:
<h1>Poll Question title</h1>
<form [formGroup]="pollvoteForm" (ngSubmit)="submitForm()">
<div class="form-check" *ngFor="let opt of Options; let i=index">
<h1>{{opt}}</h1>
<input
type="radio"
class="form-check-input"
formControlName="selection"
[value]="i"
/>
<label class="form-check-label"> {{opt}} </label>
</div>
<button type="submit" class="btn btn-secondary mt-3">Submit Votes</button>
</form>
Being new to Angular, I'm still learning and navigating through the challenges. Any help would be greatly appreciated.