The action buttons are shown in the improper state

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html

@@ -14,6 +14,7 @@
 limitations under the License.
 -->
 <form [formGroup]="profileForm" class="profile-form">
+  {{ profileForm.valid }}
   <div class="field-container">
     <p class="field-label">Profile name *</p>
     <mat-form-field
@@ -60,15 +61,15 @@
   </div>
 </form>
 <div class="form-actions">
-  <button mat-flat-button color="primary" class="save-profile-button">
-    Save Profile
-  </button>
-  <button mat-flat-button class="save-draft-button">Save Draft</button>
   <button
     mat-flat-button
-    class="discard-button"
-    [disabled]="profileForm.pristine">
-    Discard
+    color="primary"
+    class="save-profile-button"
+    [disabled]="!profileForm.valid">
+    Save Profile
+  </button>
+  <button mat-button class="save-draft-button" [disabled]="!nameControl.valid">
+    Save Draft
   </button>
 </div>
 

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss

@@ -57,8 +57,7 @@
   padding: 8px 24px 24px 24px;
 }
 
-.save-draft-button,
-.discard-button {
+.save-draft-button:not(.mat-mdc-button-disabled) {
   color: $primary;
 }
 

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts

@@ -292,5 +292,38 @@ describe('ProfileFormComponent', () => {
         });
       }
     });
+
+    describe('Draft button', () => {
+      it('should be enabled when valid profile name is present', () => {
+        const name: HTMLInputElement = compiled.querySelector(
+          '.form-name'
+        ) as HTMLInputElement;
+        name.value = 'name';
+        name.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        const draftButton = compiled.querySelector(
+          '.save-draft-button'
+        ) as HTMLButtonElement;
+
+        expect(draftButton.disabled).toBeFalse();
+      });
+    });
+
+    describe('Save button', () => {
+      it('should be enabled when required fields are present', () => {
+        component.nameControl.setValue('test');
+        component.getControl('0').setValue('test@test.test');
+        component.getControl('1').setValue('test');
+        component.getControl('2').setValue('test');
+        component.getControl('3').setValue({ 0: true, 1: true, 2: true });
+        component.getControl('4').setValue('test');
+        fixture.detectChanges();
+        const saveButton = compiled.querySelector(
+          '.save-profile-button'
+        ) as HTMLButtonElement;
+
+        expect(saveButton.disabled).toBeFalse();
+      });
+    });
   });
 });