Angular密码表单字段ngIf帮助块触发异常错误循环问题

嘿，这个问题我之前也碰到过，其实就是少了个关键的模板引用绑定！你在模板里直接用password.valid时，Angular并没有把这个输入框的表单控件实例关联到password变量上，导致它是undefined，自然就访问不到valid属性了。

你只需要给input标签添加一个模板引用变量，明确告诉Angular把NgModel的实例赋值给这个变量就行，具体做法是在input里加上#password="ngModel"：

修改后的完整代码如下：

<div class="form-group">
  <label for="password">Password</label>
  <input 
    type="password" 
    id="password" 
    name="password" 
    ngModel 
    required 
    class="form-control" 
    minlength="6" 
    placeholder="6 character minimum"
    #password="ngModel" <!-- 这行是核心解决点！ -->
  >
  <span class="help-block" *ngIf="!password.valid && password.touched">
    密码长度至少需要6个字符哦
  </span>
</div>

为什么这行这么关键？

• 没有#password="ngModel"的话，模板里的password要么是未定义，要么只是普通的DOM元素引用，根本不是Angular的表单控件实例，所以找不到valid、touched这些状态属性。
• 加上这个绑定后，Angular会自动把该输入框的NgModel控件实例关联到password变量上，你就能正常访问它的各种状态属性了。

如果之后你用到响应式表单（FormGroup），写法会略有不同，但当前你用的是模板驱动表单，这个方法完全适用~

内容的提问来源于stack exchange，提问作者Mathias