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

我也被这种变化所困扰。它没有列在角度4的突变变化列表中。

您需要添加ngNativeValidate

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

根据此comment

Answer 2

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