So far I've always seen that you shouldn't mix using [(ngModel)]
with reactive forms, and instead simply use formControlName
.
However, for me it doesn't seem to be working?
I have a form and I add controls to it
this.exportForm.addControl("surcharge", new FormControl(this.details.SurchargeExtraField));
and in my html I give the input the formControlName
<div class="col-sm-12 col-md-6">
<input type="text" formControlName="surcharge" />
</div>
However when I use the input it doesn't change anything about this.details.SurchargeExtraField
, it only works for validation.
When I do:
<input type="text" formControlName="surcharge" [(ngModel)]="details.SurchargeExtraField" />
It works perfectly, but appareantly it's not the correct way.
You can listen to the form changes by using this
For more info on reactive form check this LINK
The same is applicable for any FormControl in the form you can look for changes and act accordingly
You can listen for form changes like this
or you can listen for formcontrol changes like this
or you can do this