带有 ngFor 输入的 Angular 2 模板驱动表单

Posted 2023-02-22

【中文标题】带有 ngFor 输入的 Angular 2 模板驱动表单

【英文标题】：Angular 2 template driven form with ngFor inputs

【发布时间】：2017-01-29 15:48:06

【问题描述】：

是否可以在模板驱动的表单中使用 ngFor 创建输入字段，并使用 #name="ngModel" 之类的东西来在另一个标签中使用 name.valid？

现在我们有一个动态的产品列表，其中包含一个数量字段和一个表格中的添加到购物车按钮。我想把整个东西做成一个表格，最后有一个添加所有按钮，如下所示：

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-item.id"
               [(ngModel)]="item.qty"
               #????="ngModel"
               validateQuantity>
        <button (click)="addItemToCart(item)"
                [disabled]="!????.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

但是如何为 ngModel 每行生成一个新的变量名？

【问题讨论】：

Angular 2+ and Observables: Can't bind to 'ngModel' since it isn't a known property of 'select'的可能重复

@rene 这绝对是一个类似的问题，但在不同的部分，我不知道使我的模板工作的语法，而该问题具有正确的语法但缺少一个模块。

【参考方案1】：

这个没必要，就这样吧：

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-item.id"
               [(ngModel)]="item.qty"
               validateQuantity
               #qtyInput>
        <button (click)="addItemToCart(item)"
                [disabled]="!qtyInput.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

这里是它的 Angular 部分。 :)

【讨论】：

等等什么？我试过了，但它没有用，但突然它起作用了，一定是犯了一些错字或其他错误。无论如何，谢谢！

我收到错误：如果在表单标记中使用 ngModel，则必须设置名称属性或必须在 ngModelOptions 中将表单控件定义为“独立”。当我使用 name=item.name 时。但是当我首先添加字符串时，它起作用了！！！ >> name="someTxtitem.name" ！！！但我需要名称与 item.name 值相等。你能帮我吗？？

【参考方案2】：

您需要将 FormModule 添加到您的 app.module.ts 以使 2-way-binding 工作，至少在较新版本的 angular 中

Angular 4 - "Can't bind to 'ngModel' since it isn't a known property of 'input' " error

【参考方案3】：

mxii 答案对ngFor 动态创建的表单项按预期工作，但如果您不打算使用ngForm，并且您正在迭代一个列表项有一个独立的实体（如 cmets 列表，并且用户应该能够回复每条评论）您可以使用 template reference variables，它使您能够轻松获取和使用 Input 元素。

你可以这样做：

// Your template
<div *ngFor="item in items">
  <!-- Your input -->
  <input #itemInput type="number">

  <button (click)="addItemToCart(itemInput.value)"
          [disabled]="!itemInput.value">Add to cart</button>
</div>

它引用分配给输入字段的变量，在上面的示例中，我们传递了itemInput.value，这将是输入字段的值；在某些情况下，您可能需要对输入字段的引用（假设您将在获取数据时删除它的值），您可以只传递 itemInput 并且它是 htmlInputElement 的一种类型并访问它的数据。