如何分別驗證用戶名和密碼？

Question

這是我的代碼，在一次輸入字段觸摸時我同時收到錯誤消息``輸入用戶名''和``輸入密碼''。我認為#name和ngModel出了問題。 我無法弄清楚。

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

Answer 1

對於您的password輸入字段，您正在使用#name="ngModel" ，該#name="ngModel"應為#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>

Answer 2

您可能會復制並#name="ngModel"密碼的名稱輸入代碼，因此需要在#name #name="ngModel"重命名模板引用名稱#name

Tempalte ref名稱（將其命名為#mypassword ）不能與[(ngModel)]="password"可變password相同； 然后將隱藏的警報模板引用名稱修改為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>

另外，如果您將user對象傳遞給html，如下所示，則可以正常工作且沒有錯誤：

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