fix: checkout payment parameter form validation (#1035)

intershop · Mar 4, 2022 · 4dbccaf · 4dbccaf
1 parent 521c28a
commit 4dbccaf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html b/src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html
@@ -157,6 +157,7 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                         [paymentMethod]="paymentMethod"
                         [parentForm]="paymentForm"
                         [submitDisabled]="submitDisabled"
+                        [activated]="formIsOpen(i)"
                         (cancelPayment)="cancelNewPaymentInstrument()"
                         (submitPayment)="submitParameterForm()"
                       ></ish-payment-parameter-form>

diff --git a/src/app/pages/checkout-payment/payment-parameter-form/payment-parameter-form.component.ts b/src/app/pages/checkout-payment/payment-parameter-form/payment-parameter-form.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 
@@ -9,10 +9,14 @@ import { PaymentMethod } from 'ish-core/models/payment-method/payment-method.mod
   templateUrl: './payment-parameter-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PaymentParameterFormComponent implements OnInit {
+export class PaymentParameterFormComponent implements OnInit, OnChanges {
   @Input() parentForm: FormGroup;
   @Input() paymentMethod: PaymentMethod;
   @Input() submitDisabled: boolean;
+  /**
+   * should be set to true by the parent, if component is visible
+   */
+  @Input() activated = false;
 
   @Output() cancelPayment = new EventEmitter();
   @Output() submitPayment = new EventEmitter();
@@ -25,15 +29,22 @@ export class PaymentParameterFormComponent implements OnInit {
     this.fields = [];
     this.paymentMethod.parameters.forEach(param => this.fields.push({ ...param }));
     this.fields.forEach(field => (this.model[field.key as string] = field.templateOptions?.options ? undefined : ''));
-    this.parentForm.setControl('parameters', this.form);
+  }
+
+  /**
+   * load concardis script if component is shown
+   */
+  ngOnChanges() {
+    if (this.paymentMethod && this.activated) {
+      this.parentForm.setControl('parameters', this.form);
+    }
   }
 
   cancelNewPaymentInstrument() {
     this.cancelPayment.emit();
   }
 
   submitParameterForm() {
-    this.parentForm.setControl('parameters', this.form);
     this.submitPayment.emit();
   }
 }