Angular动态添加一个带有输入和按钮的字段集

Posted 2023-02-22

【中文标题】Angular动态添加一个带有输入和按钮的字段集

【英文标题】：Angular dynamically add a fieldset with and input and button

【发布时间】：2022-01-11 16:57:53

【问题描述】：

我想要一个表单，它有一个输入字段，输入数字 (15,30,45)，将用作分钟。它应该有一个添加按钮，它将添加该输入的另一行，旁边还有那个添加按钮。如果我有多个这些字段集，那么我希望在所有字段集之外有一个按钮，可以删除输入。

<div id="minute">
  <label for="MinuteImput">In Minute </label>
  <input type="number" id="MinuteImput" min="0" max="45" step="15">
  <button>+</button>
  <button *ngIf="count divs with id minute > 1" >-</button>
</div>

【问题讨论】：

你需要一个动态表单

谢谢，我去看看

在 ngif 中看起来像一个错误的条件

@SaeedSharman 是的，它应该是显示我意图的伪代码

【参考方案1】：

在 Angular 框架中尽量避免使用“id”本身。这个框架的主题是数据绑定。对于您的情况，您需要使用“ngFor”。类似于以下内容。

<div *ngFor='let num of inptFieldArray'>
  <label for="MinuteImput">In Minute </label>
  <input type="number" id="MinuteImput" min="0" max="45" step="15">
  <button (click)="inptFieldArray.push(inptFieldArray.length)">+</button>
  <button *ngIf="inptFieldArray.length> 1"  (click)="remove(num)">-</button>
</div>

Reference