I am attempting to create a select element with one option for each item in my classes array.
Here is the TypeScript file:
@Component({
selector: 'app-create-deck',
templateUrl: './create-deck.component.html',
styleUrls: ['./create-deck.component.scss']
})
export class CreateDeckComponent implements OnInit {
classes: ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
createDeckForm: FormGroup;
constructor() { }
ngOnInit(){
this.createDeckForm = new FormGroup({
'deckName': new FormControl('Meme Deck'),
'chooseClass': new FormControl('class')
});
}
onSubmit() {
console.log(this.createDeckForm);
this.createDeckForm.reset();
Am I correctly looping over the elements of the array?
And here is the HTML code:
<div class="container">
<div class="row">
<form [formGroup]="createDeckForm" (ngSubmit)="onSubmit()">
<label for="deckName">Deck Name</label>
<input
type="text"
id="deckName"
formControlName="deckName"
class="form-control"
/>
<label for="chooseClass">Deck class</label>
<select id="chooseClass" name="chooseClass">
<option
*ngFor="let class of classes"
[value]="class">
{{class}}
</option>
</select>
</form>
</div>
</div>
What am I doing incorrectly?