Question

在模板中我有一个表单，其中一部分与渲染课程列表有关：

<form #f="ngForm" (ngSubmit)="submit(f)">
 <div class="form-group">
  <label for="courseCategory"> Category </label>
  <select required ngModel name="courseCategory" #courseCategory="ngModel" id="courseCategory" class="form-control">
    <option value=""></option>
    <option *ngFor="let category of categories" [value]="category.id"> // line 16
      {{category.name}}
    </option>
  </select>
  <div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors.required">
    Course category is required
  </div>
 </div>
</form>

在浏览器中，当我选择一个类别并按TAB（离开下拉列表）时，我在控制台上收到此错误：

CourseComponent.html：16 ERROR TypeError：无法读取属性＆＃39;需＆＃39;为null 在Object.eval [as updateDirectives]（CourseComponent.html：20）

你能帮我找出导致这个错误的原因吗？

VS代码中已经安装了Bootstrap 3.3.7。

Answer 1

错误不会永远存在，所以你必须这样定义：

<div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors?.required">

使用安全操作员＆＃34;？＆＃34;

Answer 2

我在Angular 7中以这种方式解决了这个问题

<div *ngIf="formField.password.errors?.required" class="invalid-feedback">
Password is required
</div>

Answer 3

David Anthony Acosta已经提出了一个解决方案＆＃39;我也这样解决了：

Unexpected directive 'NgModel' imported by the module 'AppModule'. Please add a @NgModule annotation

（如果触摸了下拉列表，则应显示错误消息，但未选择任何选项。）

Answer 4

以下代码对我有用。 '？'在courseCategory之后没有必要，但是，这是针对Visual Studio代码中的错误的解决方法，其中linter标志courseCategory.errors?.required"为错误，指出未定义'required'。因此，对于VSCode用户而言，在正式发布之前会有补丁。 *ngIf="courseCategory.touched && courseCategory?.errors?.required"

Answer 5

我只是对“错误”对象进行了测试：

<div *ngIf="formField.password.errors && formField.password.errors.required" class="invalid-feedback">
Password is required
</div>

无法阅读财产＆＃39; required＆＃39;为null

5 个答案: