fix: disable add-to-cart button on quick order page if the form is in…

…valid
intershop · Nov 25, 2020 · 57bcabb · 57bcabb
1 parent 0308259
commit 57bcabb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html
@@ -98,7 +98,7 @@ <h3>{{ 'quickorder.page.subtitle' | translate }}</h3>
     <button
       type="submit"
       class="btn btn-primary"
-      [disabled]="quickOrderForm.invalid"
+      [disabled]="quickOrderFormDisabled"
       data-testing-id="add-form-to-cart"
     >
       {{ 'quickorder.page.add.cart' | translate }}
@@ -108,7 +108,7 @@ <h3>{{ 'quickorder.page.subtitle' | translate }}</h3>
     </button>
   </div>
   <div class="row mt-4">
-    <div class="col-md-4">
+    <div class="col-md-6">
       <h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
       <p>{{ 'quickorder.page.csv.subtitle' | translate }}</p>
       <form [formGroup]="csvForm" (ngSubmit)="addCsvToCart()">
@@ -136,7 +136,7 @@ <h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
           </div>
         </div>
         <div>
-          <button type="submit" class="btn btn-primary" name="addToCartCSV">
+          <button type="submit" class="btn btn-primary" name="addToCartCSV" disabled="csvForm.invalid">
             {{ 'quickorder.page.add.cart' | translate }}
           </button>
           <button type="reset" class="btn btn-link" name="reset" (click)="resetCsvProductArray()">

diff --git a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.ts b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.ts
@@ -104,6 +104,14 @@ export class QuickorderPageComponent implements OnInit {
     return this.quickOrderForm.get('quickOrderlines') as FormArray;
   }
 
+  get quickOrderFormDisabled() {
+    return (
+      this.quickOrderForm.invalid ||
+      !this.quickOrderlines.value[0].sku ||
+      !parseInt(this.quickOrderlines.value[0].quantity, 10)
+    );
+  }
+
   createLine(): FormGroup {
     return this.qf.group(
       { sku: [''], quantity: [''], product: [{}] },