Angular Password Validation


Topic: Angular Password Validation

jicee13 pro asked 7 years ago

So I'm trying to do very simple password validation. All I want is it to have a minLength of 8. I've basically copy and pasted the example code, however I am still running into issues. No matter what I enter into the password field, it is returning an error. Am I missing something small?

 

<form [formGroup]="loginForm" (ngSubmit)="login()">
  <div class="md-form">
    <i class="fa fa-envelope prefix grey-text"></i>
    <input type="email" id="loginEmail" formControlName="email" class="form-control" data-error="Please format your email correctly." data-success=" " mdbInputDirective>
    <label for="loginEmail">Email</label>
  </div>

  <div class="md-form">
    <i class="fa fa-lock prefix grey-text"></i>
    <input type="password" id="loginPassword" formControlName="password" class="form-control" data-error="Password must be at least 8 characters in length." data-success=" " mdbInputDirective>
    <label for="loginPassword">Password</label>
  </div>

  <div class="text-center">
    <input type="submit" class="btn btn-default waves-light" mdbWavesEffect value="Login" [disabled]="!loginForm.valid">
  </div>
</form>



this.loginForm = new FormGroup ({
email: new FormControl(null,[Validators.email, Validators.required]),
password: new FormControl(null,[Validators.minLength(8)]) 
})

Any help is appreciated!


Damian Gemza staff commented 7 years ago

Dear jicee13, data-error and data-success attributes works only with mdbInputDirective validation. If you want a minimum length validation for your password input, you can do it in 2 ways. 1st: use customRegex field to put there your custom regex validation, 2nd: turn off mdbInputDirective validation by using [mdbValidate]="false", and style your validation on your hand. In future we'll add support for data-error and data-success attributes for Angular Validators. Everything is described here: https://mdbootstrap.com/angular/forms/input-validation/ https://mdbootstrap.com/mdbinputdirective/ Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No