I am using angular reactive form and making distance input fields which has two input boxes called `From` and `To`.

**HTML:**

```
<form [formGroup]="form">
  <button (click)="addRow()">Add</button>
  <div formArrayName="distance">
    <div
      *ngFor="let item of form.get('distance').controls; let i = index"
      [formGroupName]="i"
      style="display: flex"
    >
      <input type="number" placeholder="From" formControlName="from" />
      <div><input type="number" placeholder="To" formControlName="to" /></div>
    </div>
  </div>
  <br /><br />
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

```

**TypeScript:**

```
ngOnInit() {
  this.form = this.fb.group({
    distance: this.fb.array([]),
  });
  this.addRow()
}

addRow() {
  const control = this.form.controls.distance as FormArray;
  control.push(this.fb.group({
    from: ['',Validators.required],
    to: ['',Validators.required]
  }));
}

```

Here you could able to see the two input boxes in default as `from` and `to`.

There is an add button at top and upon clicking add button the rows with same input fields gets added and forms as array.

Here i am in the need of restriction that user **should not allowed** to enter the previous row **to** value and also not the value lesser than that.

For eg.,

In the first row, if user enters the below values like **0** and **5** for from and to respectively,

```
  "distance": [
    {
      "from": 0,
      "to": 5
    }
  ]

```

After clicking add and in second row in **From** input box user needs to be restricted on adding the values of 5 and lesser than that (which means those values were already entered).

So like this is invalid,

```
{
  "distance": [
    {
      "from": 0,
      "to": 5
    },
    {
      "from": 5,
      "to": 10
    }
  ]
}

```

Here `"from": 5,` or `"from": 4(or)3(or)2(or)1`, anything is invalid in second row..

Only 6 and greater than 6 is valid.

Likewise for each row it needs to check for previous row to value and validation needs to be done.

Kindly help me to achieve this type of validation of restricting the user not to enter previous row to value (or) lesser than that in current row's from value. 

**Working Example:** <https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-j58atx>

**Edit:**

Tried with input change like, 

```
<input type="number" (input)="onInputChange($event.target.value)" placeholder="From" formControlName="from">

```

in the link <https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-ymfpkj> but not sure whether i am going correct..

Kindly change if this procedure is wrong.