Newer
Older
<h1 class="fw-bold ms-2 mt-2 fs-2">New Game Form</h1>
<form #gameForm="ngForm" (ngSubmit)="onSubmit()" class="ms-3">
<div class="form-group">
<label for="gameDateTime">Game Date</label>
<input #gameDateTime="ngModel" [(ngModel)]="model.gameDateTime" class="form-control"
id="gameDateTime"
name="gameDateTime" required
type="text">
<div [hidden]="gameDateTime.valid || gameDateTime.pristine"
class="alert alert-danger">
Name is required
<div class="form-group">
<label for="homeTeam">Home Team</label>
<select #homeTeam="ngModel" [(ngModel)]="model.homeTeam"
class="form-control"
id="homeTeam" name="homeTeam"
required>
<option *ngFor="let team of teams" [ngValue]="team">{{team.name}}</option>
</select>
<div [hidden]="homeTeam.valid || homeTeam.pristine" class="alert alert-danger">
Home Team is required
</div>
<div class="form-group">
<label for="awayTeam">Away Team</label>
<select #awayTeam="ngModel" [(ngModel)]="model.awayTeam"
class="form-control"
id="awayTeam" name="awayTeam"
required>
<option *ngFor="let team of teams" [ngValue]="team">{{team.name}}</option>
</select>
<div [hidden]="awayTeam.valid || awayTeam.pristine" class="alert alert-danger">
Away Team is required
</div>
<button [disabled]="!gameForm.form.valid" class="btn mt-2 btn-success" type="submit">Create</button>
<button (click)="resetForm(); gameForm.reset()" class="btn mt-2 ms-2 btn-danger" type="button">Reset</button>