Angular Features to Detect Form Value Changes

In this case, it was in three different forms.

Through a Manual entry-

Just a simple input field is there and we have to type the desired data into it.

Through API call

We have added an in which we are calling an API to get the names of all the users and we have to select from it in this, we can select multiple users and can dis select any at creator edit.

Through Angular directive

Which is available in another component: In our project, we had some similar input fields in all the forms. So to remove the duplicacy of codes in all the features we have made a single component and added it directly to the desired places. All the API associated with it is available in the form of component.

Now after knowing about all the form fields, it’s time to implement the disable condition on the”Save” button to disable it at the required distance. In this, it is too easy to disable the button if any of the fields are empty by directly writing the angular’s form Control Name of that field with the NOT operator.

But the difficult task is handling the edit case Angular features to detect form value changes in which we have to detect the change in the fields at every instance if any values get changed.

Ways to implement the ngdirty in different scenarios-

Edit Scenario

If we want to disable the button if any field is empty then we have to use the form Control Name as mentioned above)

When all the form fields have to be filled manually, no API cal land no external components or directives are there. In this case, just add a simply disable condition on the button. [disabled]=”!form.dirty” After adding this, in case of edit when the dialog box will open the “Save” button will remain disabled and it will remain disabled until any value gets changed.

Case2:

When data is coming in the form field through a function call from “HTML” to the “ts” file and data gets loaded after the API response.

This scenario will only adding the disabled condition mentioned in Case 1 will not work, as data is coming from the API response, it becomes untraceable for the ng-dirty to detect.

Along with the disabled condition we have to use “Custom Input Component” from ngForm to track the change and then we just have to add a simple line after the successful API response within a function definition. this.form.marks dirty();

(here form is the form group name) Through this statement, ng-dirty is able to detect the change and it changes the state of the button.

When data is coming from the external directive made as per the project’s requirement to remove the duplicacy of the code. This is a tedious condition to handle as their no association of the directive with the form group. Due to this reason,ng-dirty is not able to track the change. To handle this condition we have to implement “EventEmitter”, “CustomInputComponent” and the disabled condition on the button.

Let’s go into a bit more detail as to how this situation was handled.

Suppose this directive which we are using calls a function to get the data, in this function we have to use event Emitter in such a manner.

• @Output()dataChange=newEventEmitter(); declare one event emitter in the directive before a constructor
• this.dataChange.emit(true); Add this line in the function before return which is responsible for bringing the data in the form component. These lines emit the event we will listen to in the main form group component. (The directive file will have this two steps added in it)
• (dataChange)=”onUserDataChange()” Add this line in the HTML directive. A function will be called on UserDataChange() and then as soon as the directive will be touched on this, it will listen to the event.
• onUserDataChange() {this.form.markAsDirty();} In the definition of the function which is being called at the time of listening to an event just add the “Custom Input Component” used in Case 2.