Angular 中使用反应形式的字段的动态？

Question

我有一个场景需要编辑单引号值（仅单引号值），

所以我使用正则表达式提取了单引号值并准备了反应式动态表单。

点击执行编辑按钮会在上面显示旧的步骤名称，在下面显示新的步骤名称，提交步骤将替换原来数组中的步骤名称。

根据我的方法，在少数情况下工作正常，但在某些情况下，我意识到我遵循的任何算法都不能满足我的要求。

下面是测试用例

测试案例1：步骤名称：“那么我应该为 'USA' 雇用一名使用资料‘1’的员工”， // 这里 --> '1', 'USA' 值是可编辑的

测试用例 2：“员工应在 'Current' 财政年度‘01’的‘01’天受雇” // '01', '01', 'Current'

问题：在测试用例 2 中，如果我尝试编辑第二个 01，它正在编辑第一个 01

我尝试借助 indexof、子字符串函数来解决执行编辑功能

this.replaceString = this.selectedStep.name;
this.metaArray.forEach((element: any) => {
  var metaIndex = this.replaceString.indexOf(element.paramValue);
  if (metaIndex !== -1) {
    const replaceValue = this.stepEditForm.controls[element['paramIndex']].value;
    this.replaceString = this.replaceString.substring(0, metaIndex) + replaceValue + this.replaceString.substring(metaIndex + (element.paramValue.length));
  }
});

但在 indexof 中总是找到字符串中第一次出现的值。所以我意识到我的方法在执行函数时是错误的

代码见附件

https://stackblitz.com/edit/angular-reactive-forms-cqb9hy?file=app%2Fapp.component.ts

那么谁能向我建议如何解决这个问题，

提前致谢

Answer 1

我添加了一个名为 matchStartingPositions 的函数，returns 每个匹配的起始位置索引。使用此方法，您可以像您一样通过替换字符串来执行编辑，但我们会在给定位置找到要替换的正确匹配项。

所以在你的行中

var metaIndex = this.replaceString.indexOf(element.paramValue);

然后我们可以给indexOf加上第二个参数，也就是起点：

var metaIndex = this.replaceString.indexOf(element.paramValue, startingPositions[element.paramIndex]);

获取索引位置的函数只查找给定字符串中的那些单引号：

matchStartingPositions(str) {
    let count = 0;
    let indices = [];
    [...str].forEach((val, i) => {
      if (val === "'") {
        if (count % 2 == 0) {
          indices.push(i);
        }
        count++;
      }
    });
    return indices;
  }

这是实际操作：

https://angular-reactive-forms-xhkhmx.stackblitz.io

https://stackblitz.com/edit/angular-reactive-forms-xhkhmx?file=app/app.component.ts

Angular 中使用反应形式的字段的动态？

Dynamic from fields using reactive forms in Angular?

javascript

arrays

angular

angular-forms

angular10