角形提交未从基础模态触发

Question

我正在使用棱角分明的基础。我有一个模式窗体和一个提交按钮，但是我的提交按钮不起作用，控制台中没有任何触发器。这是我的下面的代码。

    <form novalidate [formGroup]="purchaseOrderPaymentForm" (ngSubmit)="onSubmitFormPay()">
<div class="large reveal" id="addPurchaseOrderPaymentForm" data-reveal>
  <h1>Purchase Order Payment</h1>
  <div class="grid-x grid-margin-x">
      <div class="cell medium-6">
           <label>Payment Date
              <input formControlName="payDate" type="date">
            </label>
        </div>
      <div class="cell medium-6">
        <label>Ref No
          <input formControlName="referenceNumber" type="text">
        </label>
      </div>
</div>
<button type="submit" class="button" [disabled]="!purchaseOrderPaymentForm.valid"> Update</button>
</form>

mypaymentcomponent中的代码段

 constructor(private purchaseOrderService: PurchaseOrderService, 
              private router: Router,
              private formBuilder: FormBuilder) { }

  openModal(){
     $('#addPurchaseOrderPaymentForm').foundation('open');
   }

   onSubmitFormPay () {
     console.log("Test submit");
   }

我在这里做什么错