Dynamic from fields using reactive forms in Angular?

Question

I have a scenario like Need to edit the single quotes values (only single quotes values),

So I extracted the single quotes values using regex and prepare the reactive dynamic form.

onclick of performing edit button will show old step name above, new step name below, submit step will replace the step name in the original array.

WOrking fine as expected in few scenarios according to my approach, but in scenarios, I realized whatever algorithm I am following does not fulfill my requirement.

Below are the test cases

Test case 1: Step Name: "Then I should hire an employee using profile '1' for 'USA'", // Here --> '1', 'USA' values are editable

Test case 2: "And Employee should be hired on '01' day of pay period '01' of 'Current' Fiscal" // '01', '01', 'Current'

Issues: in test case 2 if I tried to edit second 01 it is editing the first 01

I try to solve the perform edit function with help of indexof, substring functions

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));
  }
});

but in indexof always find the first occurrence of a value in a string. So I realized my approach is wrong on performed it function

please find the attachment for the code

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

So Can anyone please suggest to me how to solve this issue,

Thanks in advance

Answer 1

I added a function called matchStartingPositions that returns the starting position indexes of each match. Using this method you can then perform your edit by replacing the string just as you do, but we'll find the proper match to be replaced at the given position.

So in your line

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

we can then add a second parameter to indexOf, that is the starting point:

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

The function for getting the index positions just looks for those single quotes in a given string:

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

Here it is in action:

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

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