Add add recipe form requires a recipe name before submitting

2 files changed, 8 insertions, 4 deletions

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 36d45b6..a8a3e5f 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1,7 +1,8 @@
 <form [formGroup]="recipeForm" class="form" (ngSubmit)="onSubmit()">
 <h2>Add Recipe</h2>
 	<mat-form-field class="full-width">
-		<input matInput placeholder="Name" type="text" formControlName="recipeName">
+		<input matInput placeholder="Name" type="text"
+			formControlName="recipeName" required>
 	</mat-form-field>
 	<mat-form-field class="full-width">
 		<textarea matInput placeholder="Description"
@@ -83,5 +84,6 @@
 			</button>
 		</div>
 	</div>
-	<button mat-flat-button color="primary" type="submit">Submit</button>
+	<button mat-flat-button color="primary" type="submit"
+	[disabled]="!recipeForm.valid">Submit</button>
 </form>
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
index cdd63c8..b4f4d1e 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
@@ -5,12 +5,13 @@ import { FormControl } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
 import { FormArray } from '@angular/forms';
 
+import { Validators } from '@angular/forms';
+
 import { Recipe } from '../DataModels/recipe';
 import { Ingredient } from '../DataModels/ingredient'
 import { Step } from '../DataModels/step';
 import { BackendService } from '../REST_service/backend.service';
 
-
 @Component({
   selector: 'app-add-recipe',
   templateUrl: './add-recipe.component.html',
@@ -20,7 +21,7 @@ import { BackendService } from '../REST_service/backend.service';
 export class AddRecipeComponent {
 
   recipeForm = this.fb.group({
-    recipeName: [''],
+    recipeName: ['', Validators.required],
     desc: [''],
     ingredients: this.fb.array([
       this.fb.group({
@@ -40,6 +41,7 @@ export class AddRecipeComponent {
     tags: [''],
     photos: ['']
   });
+
   constructor(private fb: FormBuilder,
               private restService: BackendService
               ) { }