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>

希望有帮助！

在使用ngNativeValidate提交表单之前，先调用validate函数

1 个答案: