CODEWITHSUNDEEP
angular
omkar
omkar

Reputation: 216

how to validate separate for username and password?

Here's my code I am getting both error messages 'enter username'and 'enter password' on single input field touch.I think there's something wrong with #name and ngModel. I am unable to figure it out.

login.html

    <div class="form-group">
      <input  type="text" class="form-control" id="usr" placeholder="username" [(ngModel)]="username" name="username"  #name="ngModel" maxlength="10" minlength="5" required>
    </div>
    <div [hidden]="name.valid || !(name.dirty || name.touched)">
           <div class="text-danger">Please enter name</div>
    </div>
    <div class="form-group">
      <input type="password" class="form-control" id="pwd" placeholder="password" [(ngModel)]="password" name="password" #name="ngModel"  maxlength="10" minlength="5" required>
    </div>
    <div [hidden]="name.valid || !(name.dirty || name.touched)">
           <div class="text-danger">Please enter Password</div>
    </div>

login.ts

export class loginComponent {
constructor(){}
username :any;
buttonName:string;
    password:any;
    itemShow:boolean=false;
    loginClick:boolean = false;
    forgotPassClick:boolean = false;
    RegisterClick :boolean = false;`enter code here`
    loginSwitch:string;

Upvotes: 1

Views: 404

Answers (2)

Haifeng Zhang
Haifeng Zhang

Reputation: 31895

You might copy & past your name input code for your password, you need to rename template ref name #name in #name="ngModel"

Tempalte ref name(let's name it #mypassword) can't be the same as variable password in [(ngModel)]="password"; then modify the hidden alert template ref name to mypassword

<div class="form-group">
  <input
    type="password"
    class="form-control"
    id="pwd"
    placeholder="password"
    name="password"
    [(ngModel)]="password"
    #mypassword="ngModel"
    maxlength="10"
    minlength="5"
    required>
</div>
<div [hidden]="mypassword.valid || !(mypassword.dirty || mypassword.touched)">
  <div class="text-danger">Please enter Password</div>
</div>

Alternatively, if you pass user object to html as below, it works fine with no error:

[(ngModel)]="user.password"
#password="ngModel"

Upvotes: 1

Aravind
Aravind

Reputation: 41571

For your password input field you are using #name="ngModel" which should be as #password="ngModel"

 <div class="form-group">
  <input type="password" class="form-control" id="pwd" placeholder="password" [(ngModel)]="password" name="password" #password="ngModel"  maxlength="10" minlength="5" required>
</div>
<div [hidden]="password.valid || !(password.dirty || password.touched)">
       <div class="text-danger">Please enter Password</div>
</div>

Upvotes: 1

Related Questions