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}}我收到以下错误：

错误类型错误：无法读取属性＆＃39;有效＆＃39;未定义的

意思是，我的ngModel实例确实无效。

我错过了什么？

Answer 1

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

您可以在组件中使用一个为您执行验证检查的函数，而不是使用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
    }

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

1 个答案: