получить имя элемента управления, который был изменен в FormGroup или FormArray

Question

Я хочу получить имя элемента управления, который был изменен над формой в пользовательском интерфейсе.

У меня есть сценарий использования, когда мне нужно имя элемента управления динамически при обновлении любого элемента управления

Answer 1

Не знаю, хорошее ли это решение, но, думаю, оно решит вашу проблему. Также вы можете проверить консоль на StackBlitz

на вашем component.ts

  form: FormGroup;
  modified: Array<{ formControlName: string, controls: AbstractControl }> = [];
  clickCount = 1;

  ngOnInit() {
    this.form = this.fb.group({
      input1: new FormControl(''),
      input2: new FormControl(''),
      input3: new FormControl(''),
      input4: new FormControl(''),
      input5: new FormControl(''),
    });
    this.form.valueChanges.subscribe(() => this.getChanged());

  }

  setValue(){
    this.form.get(`input${this.clickCount}`).setValue("not modified by UI");
    this.clickCount++;
    if(this.clickCount == 6) this.clickCount = 1;
  }

  getChanged() {
    let controlKeys = Object.keys(this.form.controls);

    controlKeys.forEach(key => {
      let control = this.form.get(key);
      if (control.dirty) {
        let idx = this.modified.findIndex(x => x.formControlName == key);
        if (idx == -1) {
          this.modified.push({ formControlName: key, controls: control });
        }
        else {
          this.modified.slice(idx, 1);
        }
      }
    });
    console.log(this.modified);
  }

в вашем component.html

<input formControlName="input1" type="text"/>
<input formControlName="input2" type="text"/>
<input formControlName="input3" type="text"/>
<input formControlName="input4" type="text"/>
<input formControlName="input5" type="text"/>