Angular 表单验证不做任何事情答案

【问题标题】：Angular form validation not doing anythingAngular 表单验证不做任何事情
【发布时间】：2019-01-31 07:59:01
【问题描述】：

由于某种原因，我的“必需”和“最小长度”属性似乎不起作用。 (ngSubmit)="onLogin()" 无论如何都会通过。我在这里错过了什么？

<form *ngIf="activeTab === 'password'" class="login-form" (ngSubmit)="onLogin()">

          <div class="form-group">
            <label for="email">Email</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-user"></i>
                </span>
              </div>
              <input required type="email" class="form-control input-with-icon" [(ngModel)]="loginModel.email" id="email" name="email">
            </div>
          </div>

          <div class="form-group">
            <label for="password" >Parool</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-key"></i>
                </span>
              </div>
              <input required minlength="8" type="password" class="form-control input-with-icon" [(ngModel)]="loginModel.password" id="password" name="password">
            </div>
          </div>

          <div class="row col-12 justify-content-center login-btn-container">
            <input type="submit" value="Sisene" class="btn btn-primary login-btn">
          </div>
        </form>

【问题讨论】：

这是预期的行为，当表单无效时禁用提交按钮（您的 HTML 中可能有）。

标签： angular validation angular-forms

【解决方案1】：

它正在工作，你只是误解了你应该如何使用验证。在您的 ngSubmit 函数中，您应该检查表单的有效性：

<form #f="ngForm" (ngSubmit)="onLogin(f.value, f.valid)" novalidate></form>

onLogin(value, isValid) {

  if (isValid) {
    // Send to backend
  }
}

【讨论】：