如何在不订阅每个输入/组件角度变化的情况下更新数据更改的摘要状态？

Question

I have a rather complex modal to manage some data state. It has a lot of inputs, selections, checkboxes and other custom components.

Now I would like to show the user some summary hints about what data has been updated during the time modal has been opened and what consequences it would lead. For example, on some actions, I would like to change the color of the "Update" button, on some actions not to show it at all and for all states show some summary (in a tooltip, for example) of what has been changed. Important thing is that it's not just showing that some input fileds were touched and others not, it's again some combination of their state change.

The problem that I don't use <form> tag at all since most of custom components just don't have name attributes to support it. So I can't write a custom form validator, the main side effect of which will be updating state summary variable (since I need something more complex that just form valid-invalid summary flag).

I also consider an approach of attaching valueChange or ngModelChange callbacks to all inputs and components to be rather complex in implementation at the current state of development.

So there is a question how can I continuously update state summary variable based on data change.

I could use setInterval() to update state but its update delay will be something completely arbitrary from the angular update cycle.

Update state result is used in several places so creating just a function calculating it on request and putting it in all needed places is very ineffective. I've tried a hack to use such function only in one place, put the result in a variable and in all other places use the variable but it leads to angular smth like "variable is updated after it was used" error.

Is there any better approach to the problem?

Answer 1

For starters you should use reactive forms. It makes it easier to track changes and manage controls.

With that in mind, start by creating a default value for your form :

defaultFormValue = { firstName: '', lastName: '' };

Then create a form from it :

this.myForm = formBuilder.group(this.defaultFormValue);

Now you can use all of the reactive forms methods & properties to manage your form

get isFirstNameChanged() {
  return this.myForm.get('firstName').dirty;
}

get isFirstNameDifferentThanDefault() {
  return this.myForm.get('firstName').value !== this.defaultFormValue.firstName;
} 

resetForm() {
  this.myForm.reset(this.defaultFormValue);
}

// etc. 

Answer 2

I second Maryannah's idea of switching to reactive forms, with the addition of subscribing to the form's valueChanges Observable (or that of any form control) and using RxJS operators as required. For example:

// watch first name field for changes
this.userForm.get('firstName').valueChanges.pipe(
    debounceTime(300),
    distinctUntilChanged()
).subscribe(newFirstNameValue => {
    // do stuff with new value here
});

// watch whole form for compound checks
this.userForm.valueChanges.pipe(
    map(formData => { 
        importantCheckbox: formData.importantCheckbox,
        desiredInput: formData.desiredInput
    })
).subscribe(formData => {
    // react to compound check here
});

RxJS is incredibly powerful in this kind of situation. Definitely something to look into.