Habilelabs-Logo
Blog

Angular Features to Detect Form-value Changes

August 30th, 2022 . 5 minutes read
Blog featured image

Angular JS is a type-script-based free and open source web application framework led by the Angular team at Google and by a community of individuals and corporations.
We all know that Angular supports client-side form validation. It keeps track of all the form and input fields and stores the information about whether anyone has touched or modified the field.


In this blog, we will share one of our works in which we have to add some features related to the form fields and its button to save the data.

Our task was not too much tedious but the input fields made it tedious for us.

In our input fields, we can enter the data in many forms and the task was to disable the save button until all the mandatory fields are not filled at the time of update/edit the button should remain disabled if any of
the values within the form are not changed.
As soon as we switched to this task, the first step was to analyse how the data is entering into the form.

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 Detect the changes in the form:-

ngpristine

This property returns true if the form‘s contents have not been changed.

ng-dirty

This property returns true if the form’s contents have been changed.

ng-touched

This property returns true if the user has visited the form.

ng-untouched

This property returns true if the user has not visited the form.


From the aforementioned, ng-dirty result was the most suitable option for us and hence we used it in all the scenarios in different manners to detect the changes.


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)


Case1:

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.


Case3:

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.

Conclusion


Remember this function will be called when the event is emitted, this event is emitted when we touch the HTML form field associated with the directive.

On this, we will listen to the event and call the function which says that something is being changed due to which the ng-dirty will be able to change the state of the button.
This was the whole planned-out visualization of our problem in the simplest technical
way possible using this technology which never gets old.

Author: Mohammad Sameer
Share: