CODEWITHSUNDEEP
angularvalidationangular-forms
eixcs
eixcs

Reputation: 1989

Angular form validation not doing anything

For some reason my "required" ang "minlength" attributes don't seem to be working. the (ngSubmit)="onLogin()" goes through regardless. What am I missing here?

<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>

Upvotes: 1

Views: 54

Answers (1)

Chrillewoodz
Chrillewoodz

Reputation: 28318

It is working, you're just misinterpreting how you should work with the validation. In your ngSubmit function you should check for form validity:

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

onLogin(value, isValid) {

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

Upvotes: 2

Related Questions