时间戳

首页 > 解决方案 > 如何仅在 Angular Dart 中提交时验证表单？

dart - 如何仅在 Angular Dart 中提交时验证表单？

问题描述

我正在使用包含material-input的 Angular 组件库。有没有办法在更改或清空材料输入时禁用输入自动验证？这意味着我只想在提交时验证表单。

此外，尽管材料按钮的类型为提交，但 onSignInPressed() 函数在提交时不会被触发。

    <div class="container">
        <form (ngSubmit)="onSignInPressed()" #signInForm="ngForm">
            <div>
                <material-input
                        floatingLabel type="email"
                        label="E-mail"
                        [(ngModel)]="email"
                        ngControl="email"
                        required></material-input>
            </div>
            <div>
                <material-input
                        floatingLabel type="password"
                        label="Password"
                        [(ngModel)]="password"
                        ngControl="pass"
                        required></material-input>
            </div>
            <div class="w-100">
                <material-button class="mx-0 btn-primary w-100 margin-zero" type="submit"
                                 [disabled]="!signInForm.form.valid">
                        Sign In
                </material-button>
            </div>
        </form>
    </div>

标签： dartmaterial-designangular-componentsangular-dart

解决方案

您可以尝试在材料输入上使用不同的值访问器，但是您将无法在提交时验证表单。

使用changeUpdate，验证将在模糊或按 ENTER 时触发

<material-input changeUpdate [(ngModel)]="value"

文档

关于材料按钮，github上有一个问题，有一个hacky解决方案。

您也可以尝试添加隐藏的输入

<input type="submit" hidden />

推荐阅读