Enabling/disabling buttons depending on input field state (#14)

mtlynch · May 2, 2018 · 4cdaadf · 4cdaadf
1 parent a8481cf
commit 4cdaadf
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/app/public/home-page/home-page.component.html b/src/app/public/home-page/home-page.component.html
@@ -2,11 +2,11 @@
   <span>Ingredient Parser Demo</span>
 </mat-toolbar>
 <form>
-    <mat-form-field class="input-full-width" floatPlaceholder="never">
-      <input matInput placeholder="2 cups brown sugar" name="ingredientRaw" [(ngModel)]="ingredientRaw">
+    <mat-form-field class="input-full-width" floatPlaceholder="never" hideRequiredMarker>
+      <input matInput placeholder="2 cups brown sugar" name="ingredientRaw" [(ngModel)]="ingredientRaw" required>
     </mat-form-field>
-    <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult">Parse</button>
-    <button mat-raised-button (click)="reset()">Reset</button>
+    <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult || !ingredientRaw">Parse</button>
+    <button mat-raised-button (click)="reset()" [disabled]="!ingredientRaw">Reset</button>
   </form>
 <div *ngIf="isWaitingForParseResult">
     <mat-spinner></mat-spinner>