Angular-每当触摸/修改组件html中的任何字段时，是否在组件类中调用方法？

我有一个父组件，父组件中有多个子组件。。父组件有一个保存按钮

子组件具有字段/控件，如textbox和其他类型

每当修改/触摸子组件中的任何文本或任何其他字段时，我希望在父组件中启用“保存”按钮

<div>
   <h3>Parent Component</h3>
   <child-component1>
   </child-component1>
   <child-component2>
   </child-component2>
   <child-component3>
   </child-component3>
   <button type="submit" [disabled]="!isSaveButtonDisabled">
   Save
   </button>
</div> 

class ChildComponent {

   @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
ngOnInit() : void {

this.formGoupUser.valueChanges.subscribe((value:any) => {
  this.onChange.emit(true):
}
}  
    }

父组件
拯救

在子组件中，我有一个touchDetected（）方法，它将在更改时向父组件发出警报

子组件

<div>
   <h3>Parent Component</h3>
   <child-component1>
   </child-component1>
   <child-component2>
   </child-component2>
   <child-component3>
   </child-component3>
   <button type="submit" [disabled]="!isSaveButtonDisabled">
   Save
   </button>
</div> 

class ChildComponent {

   @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
ngOnInit() : void {

this.formGoupUser.valueChanges.subscribe((value:any) => {
  this.onChange.emit(true):
}
}  
    }

类子组件{
@Output（）onChange:EventEmitter=neweventemitter（）；
ngOnInit（）：void{
this.formGoupUser.valueChanges.subscribe（（值：any）=>{
this.onChange.emit（true）：
}
}  
}

子组件html

<form [formGroup]="formGroupUser">
  /* Form elements and controls */
<form>

/*表单元素和控件*/

已编辑：我订阅了FormGroup上的ValueChanges，以便在子组件字段发生任何更改时更新父组件，问题在于我的表单在页面加载期间字段最初自动填充，因此。onChange.emit（true）在用户对字段进行任何更改之前是否会被调用

---

如何克服这一问题，以便只有当用户对表单上的任何字段进行任何更改时，才会调用

this.onChange.emit（true）

。

我可以建议在ngOnInit（）中尝试以下操作：

尝试在组件中设置一个内部标志以指示加载状态

 this.isLoading = true;

初始化数据后，请尝试：

 this.formGroupUser.markAsPristine();
 this.formGroupUser.markAsUntouched();
 this.isLoading = false;

在valueChanges订户事件中，检查是否仍处于加载状态。如果未处于加载状态，则在发生更改时触发事件：

 this.formGroupUser.valueChanges.subscribe(x => { 
     if (this.isLoading === false)
         this.touchDetected();
 })

---

如果您正在从输入装饰器设置数据，那么也可以使用以下代码（其中data=您的数据输入参数）：

---

这将在绑定之前和绑定之后设置加载标志，然后将控件标记为原始/未触及。它应确保在控件绑定期间不会触发值更改事件处理程序中的代码。

如果您使用的是反应式表单，则可以订阅该表单组上的值更改，并检查以下属性的值肮脏、原始、被触摸、未被触碰。@Kitsune66我可以通过订阅ngOnInit（）中的值更改表单到值更改来实现这一点但问题是，在我的表单中，在页面加载期间，很少有字段最初是自动填充的，在该阶段，将调用此ValueChanges并启用表单上的“保存”按钮，是否有办法克服此问题？@nc\teh在首次设置任何值之前，在ValueChanges回调中放置一个表单组接触条件@nc_teh您可以演示如何初始化formGroup吗？您是否初始化formGroup并通过编程自动填充其值？@nc_teh查找formGroup属性pristine或dirty—“如果用户更改了UI中的值，则控件为dirty。”我面临一个问题，此组件子组件的数据作为输入属性来自父组件@Input user:user，我无法设置此。isLoading=false；。我们是否有生命周期挂钩，在绑定表单元素后调用它，以便我可以使用它来设置此。isLoading=false；以及markAsPristine（）和markAsUntouched（）？