Как интегрировать экспресс-оплату PayPal в приложение Angular после проверки формы

Question

Я встроил PayPal в свое угловое приложение. Однако я изо всех сил пытаюсь выяснить, как проверить элементы формы перед запуском потока PayPal, чтобы вместо этого я мог отобразить сообщение об ошибке. Например, мне нужно иметь действующий адрес электронной почты, чтобы разрешить им продолжить.

Я довольно новичок в разработке углов, и могу ли я сделать это нормально на html-странице из комментариев bluepnume здесь , но мне интересно, есть ли такой пример в Angular?

ngOnInit() {

    paypal.Button.render({
      env: 'sandbox',
      locale: 'en_US',
      style: {
        label: 'pay',
        fundingicons: 'true',
        branding: 'true',
        size: 'responsive',
        shape: 'rect',
        color: 'gold'
      },

      client: {
        sandbox: environment.PaypalSandBoxClientKey,
      },
      commit: true,
      payment: (data, actions) => {
        return actions.payment.create({
        ...
        });
      },
      onAuthorize: (data, actions) => {
        return actions.payment.execute().then((payment) => {
          this.createReservation(...);
        });
      },
      // onInit is called when the button first renders
      onInit: (data, actions) => {

        // Disable the buttons
        actions.disable();

        document.querySelector('#email')
          .addEventListener('change', function (event) {
            this.isValid() ? actions.enable() : actions.disable();
          });
      },
      onClick: () => {
        this.toggleValidationMessage();
      },

    }, '#paypal-checkout-btn');

  }

  isValid(): boolean {
    let valid = false;
    const email = document.querySelector("#email").value;

    if (!this.validEmail(email)) {
      document.querySelector("#error").innerHTML = "Please enter a valid e-mail";
      return false;
    }

    return true;
  }

  validEmail(email): boolean {
    ...
  }

  toggleValidationMessage(): void {
    document.querySelector('#error').style.display = (this.isValid() ? 'none' : 'block');
  }

  createReservation(...): void {

Возникает пара вопросов в угловом компоненте выше, и я, очевидно, поступаю неправильно.

• onInit не вызывается скриптом PayPal, поэтому для включения / выключения действий не устанавливается обработчик событий изменения.
• document.querySelector вызовы в методе isValid дают ошибки компиляции. Есть ли способ получить элемент со страницы HTML?