Angular 2即使有错误也会提交

Question

我正在尝试使用表单生成器实现Angular 2表单。这是我的component.html

 <div class="login-container">
  <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.$value)" #f="ngForm" novalidate class="col-md-5">
    <div class="text-center">
      <img src="assets/logo.png" alt="Logo" class="img-fluid">
    </div>
    <input id="username" formControlName="username" type="text" placeholder="Usuario" aria-describedby="Usuario" class="form-control">
    <input id="password" formControlName="password" type="password" placeholder="Contraseña" aria-describedby="Contraseña" class="form-control">
    <button type="submit" class="btn btn-primary btn-block btn-lg">Entrar</button>
  </form>
</div>

这是我的组件

...
constructor(
    private router: Router, 
    private authenticationService: AuthService,
    public fb: FormBuilder) { 
      this.loginForm = this.fb.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
      });    
    }
...
login(value:any) {
    this.loading = true;
// Here goes the authentication logic.
      }

但是我的表格总是提交，即使它有错误，或输入是空白的。我做错了吗？还是缺少某些东西？

Answer 1

你没有做错任何事，这是编码方式的预期行为。如果您不希望在出现错误时提交表单，则需要在处于无效状态时禁用提交按钮。

<button type="submit" [disabled]="!loginForm.valid" class="btn btn-primary btn-block btn-lg">Entrar</button>

Answer 2

您可以从表单中发送有效的属性。

<form [formGroup]="loginForm" #f="ngForm" (ngSubmit)="login(loginForm.$value, f.valid)" novalidate>

然后在提交功能中检查它。

login(value:any, valid: boolean) {
    if (!valid) {
      return;
    }

    this.loading = true;
     // Here goes the authentication logic.
 }

Answer 3

如果你想保持按钮可用但是在提交时查看表单，那么你可以使用'updateOn：submit'来执行以下操作，这是自Angular5以来的新功能：https://medium.com/codingthesmartway-com-blog/angular-5-forms-update-9587c3735cd3

或者，在这里找到的另一个选项（寻找kara的帖子）：https://github.com/angular/angular/issues/14527：

  <form [formGroup]="heroForm" #formDir="ngForm">
  <div *ngIf="heroForm.hasError('required', 'name') && formDir.submitted">
     Name is required.
  </div>
   <input formControlName="name">
   <input formControlName="power">
   <button [disabled]="heroForm.invalid && formDir.submitted">
      Submit 
   </button>
</form>