使用模板驱动表单验证 ngFor 中的输入

Question

在我们的 Angular 表单中（我们使用 template driven forms），我们有一个动态呈现的输入字段列表，因此，我们需要验证。在此之后：Using template driven form with dynamic input list (ngFor) 我没有再进一步，因为它似乎已经过时，因为 plunkr 示例不起作用。

那是我们的 tbody 呈现我们的列表：

  <tbody>
    <tr *ngFor="let item of items; let i=index">
      <td><span>{{ item.categoryName }}</span></td>
      <td class="text-right">
        <input *ngIf="editMode" 
          type="number" 
          tabindex="1" 
          autocomplete="off" 
          [(ngModel)]="item.value" name="value-{{item.categoryId}}" #value="ngModel"
          required 
        />
        {{value.valid}} <!--As I'm using ngForm I was expecting to receive false or true here-->
        <span *ngIf="!editMode">{{ item.value }}</span>
      </td>
      <td>
        <app-status [status]="item.status"></app-status>
      </td>
    </tr>
  </tbody>

这个工作正常，可以看到列表，但是验证不起作用。

如果我尝试：{{value.valid}} 我收到以下错误：

ERROR TypeError: Cannot read property 'valid' of undefined

意味着，我的 ngModel 实例不起作用。

我错过了什么？

Answer 1

你想在哪里做{{value.valid}}？我在这里看不到，所以我不知道是什么导致了 null 的值定义。

除了使用value 的属性，您还可以在组件中使用一个函数来为您进行验证检查。

<tr *ngFor="let item of items; let i = index">
  <!-- somewhere in your code -->
  <div *ngIf="myValidationFunction(value)">
    <!-- stuff -->
  </div> 

然后在你的 ts 文件中，你可以有一些东西来检查它。如果它总是需要，那很简单。

myValidationFunction(value) {
    if (value) {
        // results to 'true' if value isn't null
        return value.valid; // where valid is some field in value
    }
    else { // if value is null, you can say that it is wrong
        return false; // this means that it will not be valid until it's defined
    }