Recently, I started working with reactive forms in Angular(v7) for the first time.
I am trying to create a functionality where my submit button becomes enabled when any of the fields are modified. To achieve this, I am utilizing the dirty value of the form. It works well for simple scenarios, such as changing an input type text and enabling the button.
However, I encountered an issue with an element (
<span id="locationUpdated">hidden input that receives its value in the same way as the span element.
<form [formGroup]="model.form" >
....
<input id="nameInput" type="text"
[(ngModel)]="model.user.name"
formControlName="name" />
...
<span [textContent]="model.user.location.label" id="locationUpdated"></span>
<input type="hidden" [value]="model.user.location.label" formControlName="location" />
....
<button [ngClass]="{'disabled': !model.form.dirty}></button>
</form>
--- Component ---
private buildFormUpdated() {
this.model.form = this.formBuilder.group({
name: [this.model.user.name, [Validators.required]],
location: [this.model.user.location.label]
});
}
Initially, I changed the hidden input to text to visualize the value changes, which worked perfectly fine.
However, even after making this change, the dirty property remains false. Only manual changes trigger dirty:true.
Can anyone point out what I might be missing? Any help is appreciated!