angular - 在 Angular 的动态创建字段中有条件地更改字段时，如何推送相同的值集？

Question

我创建了一个动态行，其中包含 2 个下拉菜单和一个文本框字段，我们可以添加或删除更多行。

我有一个条件，如果选择第一个下拉值作为 'Date' ，并且选择第二个下拉值 'Equal To' ，则 Textbox 字段更改为 Datepicker field 。

然后当我们按下 + 图标时，它应该再次添加默认行（2 个下拉菜单和 1 个文本框字段）。但是现在它在执行上述条件时添加了一个 Datepicker 字段。

我已经为这个问题创建了一个 stackblitz 链接 - 有人可以帮忙吗？

（选择Date From First Dropdown ，和Equal To From Second 。然后点击 + ，期望是默认添加一个新行）。提前致谢

标签： angularangular-reactive-forms

Answer 1

您将需要一种方法来区分每个项目的日期，例如使用[index]

你可以定义

  showDatePicker: boolean[] = [false];
  hideValue: boolean[] = [false];

并转换您的所有属性以匹配这个新结构。

改变

  showDatePicker[i] = false  // Where showDatePicker = false
  showDatePicker[i] = true  // Where showDatePicker = true
  showDatePicker[i] != true  // Where showDatePicker == false
  showDatePicker[i] =- true  // Where showDatePicker == true
  hideValue[i] = false // Where hideValue = false
  hideValue[i] = true  // Where hideValue = true
  hideValue[i] == true  // Where hideValue == true
  hideValue[i] != true  // Where hideValue == false

看演示