last day (15 days later) » 

9:54 AM
0
Q: Is it possible to trigger statusChanges without triggering valueChanges on a reactive form control?

EmielI have a FormGroup with multiple nested groups and controls. Most of these contain validators such as Validators.required. Whenever the user clicks the submit button, I recursively loop through the form to make sure each validator is triggered and each control is valid. This is done by marking ea...

 
why don't use Custom validators ? With validators, you just have to check global validation of your form.
 
@ThierryFalvo Could you give me an example which would make my code sample work? I don't quite understand how using a custom validator would solve the issue.
 
maybe I didn't clearly understand your need. Why is the goal of validateForm ? Custom validators as mentioned in Angular doc (link provided) give you the ability to check and validate each form control, and then no need to iterate on each field to check them manually.
 
@ThierryFalvo Because I have subscribed to statusChanges to listen for validation changes. Whenever it's triggered, I check for any validation errors and show them to the user. According to the angular docs this is "a multicasting observable that emits an event every time the validation status of the control recalculates", which seems perfect for what I used it for. If I didn't call validateForm, valueChanges would never be triggered and no validation messages would be shown.
 
I mean with custom validators you could avoid to do this, errors could be displayed inside template <div *ngIf="name.errors.forbiddenName">Name cannot be Bob.</div>. You just have to prevent submitting the form if invalid.
 
9:54 AM
@ThierryFalvo For most simple validators that would be enough. However, I have several use cases where showing and hiding validators is more complex. For example, only a single validation messages may be shown at a time for below field. There's also a bunch more checks which I would like to do for validation messages which are more expensive. Putting checks like that in the template would make it harder to read, harder to maintain and expensive because they would be done every change cycle. I have a validation message component which listens to statusChanges and handles showing messages.
 
as you want. for your information, checks are not done inside template, but inside validators, multiples messages could be displayed for one field, and they are not more expensive than listen to valueChanges. Just to let you know. But you're way is not bad either.
 
@ThierryFalvo I probably wasn't clear enough. You're right when it comes to checks to determine whether the validator is valid or not. I was referring to checks to determine whether they are shown on the page or not. Any checks inside an ngIf directive are done every time a change happens, including calls to expensive functions. Thanks for your input though!
 
And what is the problem ? It's exactly what you are doing by listen to valueChanges which is performed each time a value is changed in a field.
 
Let say I have a FormControl on which I subscribe to valueChanges
 
9:56 AM
I wanna validate the address the users puts into the form to make sure they didn't make a typo
Whenever the value changes it calls an API to do that check
That's quite expensive and I only wanna do that whenever the user makes a valid change
Whenever the user submit the form it should've already made that check because the user filled in the form
So whenvever I go to check the validity of the form I do not wanna trigger valueChanges
Which makes sense because there is no need to trigger valueChanges because the value of none of the formcontrols should change when the user submits the form
However I do wanna validate the form so statusChange should be fired
At least if any of the forms is not valid
But I cannot find a way to trigger it without triggering valueChanges
Hopefully that makes sense haha
 
I'm afraid there is a little confusion. Do you want to check the field with an async http service ? or are you able to check the field inside frontend only ?
 
In this case I have 2 checks
An async http call which is triggered upon user input (but is not a validator, just something that triggers when valueChanged is fired)
And a non-async (required) validator which should be triggered if the users does not enter anything
 
ok so just set errors manually inside FormControl during your checks (inside valueChanges subscribe), and then your control will be considered as error, your template will be able to display errors.
Then when user submits form, check is form is valid.
 
valueChanges and statusChanges are only triggered if the user enters data however
If I have other validators which would need to show errors even if the user didn't enter anything, they would not be triggered
And the main problem is that my validation error component is unable to determine whether anything should be shown or not
Because it has no reliable way to check if anything has changed
In my code the validators are triggering when they should, they don't cause me any problems at the moment
I just have issues finding a way for my validation message component to listen for changes to the validators so it can determine whether any messages should be shown or not
statusChanges is the way the angular docs seem to recommend, but I can
but I can't find a way to manually trigger it when I need to*
 
It's normal, it's only when statusChanges ;-). So if you need to do something, put this code inside another method, and call it directly. And call it also inside statusChanges.
 
10:22 AM
I'm not sure what you mean with "So if you need to do something, put this code inside another method, and call it directly."
This code referring to the code I put in the subscription on statusChanges?
 
10:54 AM
Sorry it's a little difficult to clearly understand what you are doing, and what you really want to do. Why do you need to call 'control.markAsTouched();
control.markAsDirty();
control.updateValueAndValidity();'
try
updateValueAndValidity({ onlySelf: true, emitEvent: false});
 

last day (15 days later) »