HTML Angular 忽略了必需的验证？

Question

Angular 4 忽略内置 html 验证。

如何使 Angular 考虑 html 输入元素的必填字段？

期望的行为：

代码：

         <form #loginForm="ngForm" (ngSubmit)="login()" class="m-t" role="form" action="#">
            <div class="form-group">
                <input type="text" [(ngModel)]="username" name="username" class="form-control" 
                [placeholder]="'Nom d\'utilisateur' | translate"  required />
            </div>
            <div class="form-group">
                <input type="password" [(ngModel)]="password" name="password" class="form-control" 
                [placeholder]="'Mot de passe' | translate" required>
            </div>
            <button type="submit" data-spinner-color="white" data-style="zoom-in" 
            [ladda]="isLoading" translate class="btn btn-primary block full-width m-b">
                <span translate >Login</span>
            </button>

            <a [routerLink]="['/reset' , '1']"><small translate>Mot de passe oublié ?</small></a>
            <br><br>
            <p class="text-muted text-center">
                <small translate>vous n'êtes pas encore enregistré ?</small>
            </p>
            <a translate id="register" class="btn btn-sm btn-white btn-block" [routerLink]="['/register']">
                 Créer un compte
            </a>
        </form>

Answer 1

我认为您需要在 <form> 标签上指定 novalidate。 Angular 已经将验证器附加到具有 ngModel 指令的任何元素，其中包含 required 属性。它可能正在验证，而您只是没有注意到？使用 chrome devtools 查看输入是否有 ng-invalid class？

Answer 2

我也被这个改动咬到了。它没有在 angular 4.

中的重大更改列表中列出

您需要添加 ngNativeValidate

<form ngNativeValidate #loginForm="ngForm" (ngSubmit)="login()" class="m-t" role="form" action="#">

根据这个comment

HTML Angular 忽略了必需的验证？

HTML Required validation ignored by Angular?

html

validation

angular

html-validation