我想获取控件的名称,该控件已在UI中的表单上进行了修改。
我有一个用例,当更新任何控件时,我需要动态地使用表单控件的名称
答案 0 :(得分:0)
我不知道这是一个很好的解决方案,但我认为它可以解决您的问题。您也可以在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"/>