Angular 如何分别验证用户名和密码？

这是我的代码，我在单输入触摸屏上收到两条错误消息“输入用户名”和“输入密码”。我认为#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>

---

对于您的

密码

输入字段，您使用的是

#name=“ngModel”

，应该是

#password=“ngModel”

请输入密码

您可以复制并超越您的姓名输入密码，您需要在

#name=“ngModel”中重命名模板ref name
#name

Tempalte ref name（我们将其命名为
#mypassword
）不能与
[（ngModel）]=“password”中的变量
password
相同；然后将隐藏的警报模板ref name修改为
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>

无法分配给引用或变量；。。。。我从你的解决方案中了解到了这一点，只需将#密码（保留字）重命名为某个内容即可else@omkar这很有帮助：）密码是一个保留字，那么“用户名”呢；？它不是一个保留字吗？template ref name的意思是？我没有理解它。#tempName=“ngModel”
tempName
是模板引用
 <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>

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

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