Question

我想获取控件的名称，该控件已在UI中的表单上进行了修改。

我有一个用例，当更新任何控件时，我需要动态地使用表单控件的名称

Answer 1

我不知道这是一个很好的解决方案，但我认为它可以解决您的问题。您也可以在StackBlitz

上查看控制台

在您的组件上。

  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"/>

获取在FormGroup或FormArray中修改的控件的名称

1 个答案: