错误类型：TypeError，无法读取未定义的属性 'invalid'，Angular 4。

Question

我在Angular 4中遇到以下错误：

ERROR TypeError: Cannot read property 'invalid' of undefined

以下是代码：

<form name="form"  #f="ngForm" novalidate>

  <tr>
     <td width="10%" class="text-blue"></td> 
     <td><input type="text"  name="bankname" maxlength="25" appRestrictinput ="words" [(ngModel)]="model.bk_name" #bk_name="ngModel"  class="form-control" autofocus  /> </td>
  </tr>
  <div *ngIf="bankname.invalid && (bankname.dirty || bankname.touched)" class="alert alert-danger">
     <div *ngIf="bankname.errors.required">Name is required</div>
  </div>

</form>

请告诉我哪里做错了，谢谢您的帮助。

- Vikram R

---

bk_name, and you are using bankname - JSON

Answer 1

您在视图中的控件引用是bk_name。请使用bk_name替换bankname。

<div *ngIf="bk_name.invalid && (bk_name.dirty || bk_name.touched)" class="alert alert-danger">
<div *ngIf="bk_name.errors.required">Name is required.</div>

- Suren Srapyan

---

为什么下划线会起作用呢？这是Ng-bootstrap遵循的关键字/属性标准吗？ - Neo Sono

他同时拥有变量并将它们混合使用。 - Suren Srapyan

Answer 2

您刚刚忘记了模板变量

将#bankname="ngModel"添加到您的输入中，它将与您一起工作

<input ngModel name="bankname" type="text" #bankname="ngModel" class="form-control" placeholder="Name" required> <br/>

<div class="alert alert-danger" *ngIf="bankname.invalid">bankname is required</div>

- Dariwsh D