在使用ngNativeValidate提交表單之前，先調用validate函數

Question

嗨，我試圖在單擊按鈕時調用validate（ngNativeValidate）函數。

我的表格如下：

<form #myForm="ngForm" (ngSubmit)="addEndpoint(myForm.value);" ngNativeValidate>
        <section class="form-block">
            <div class="form-group">
                <input type="text" placeholder="name" name="name" [(ngModel)]="myData.name" [hidden]="true">
            </div>
            </section>
        <button type="button" class="btn btn-outline" (click)="testEndpoint(myForm.value);">TEST CONNECTION</button>
        <button type="submit" class="btn btn-primary" [disabled]="disableSubmit">SUBMIT</button>
    </form>

驗證按“ SUBMIT按鈕的預期進行。 即使是“ TEST CONNECTION按鈕，我也想要相同的行為。 但不想提交表格。 我該怎么辦？ 我認為將有某種方式可以僅調用驗證器函數的單擊事件。 任何幫助表示贊賞。 謝謝！ 提前。

編輯： testEndpoint是一個后端調用函數。

Answer 1

在反應式表單中，如果您要使用“測試連接”按鈕嘗試檢查用戶輸入，則可以使用表單的“有效”和“觸摸”屬性向用戶顯示反饋。

因此，如果表單無效且按鈕提交已禁用，則可以跳過“測試連接”按鈕並直接輸出以下范圍：

<button type="submit" class="btn btn-primary" [disabled]="disableSubmit">SUBMIT</button>
<span *ngIf="!myForm.valid && myForm.touched" class="help-block">Please enter valid data!</span>

希望能幫助到你！