在使用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>

希望能帮助到你！