How to fire the `valueChanges` programmatically?

On one of my pages I use a FormBuilder to fill a form at initialization. Every input gets a class whenever the input is not empty. This is done by adding a ngClass to every input, and subscribing on the FormGroup's valueChanges.

My problem occurs whenever the form is filled programmatically. Whenever a user changes any value on the form, valueChanges gets called, however, this is not the case when using a FormBuilder.

My question is: How to get the valueChanges event to be fired whenever the FormBuilder is finished.

I have tried using this.FormGroup.updateValueAndValidity(), but this did not result in anything.

I found a solution which worked for me. I forgot two parameters in the updateValueAndValidity function.

• onlySelf: will only update this FormControl when true.
• emitEvent: will cause valueChanges event to be fired when true.

So as result you will get something like: FormGroup.updateValueAndValidity({ onlySelf: false, emitEvent: true });

Your question isn't 100% clear, but I think what you're saying it :

> My valueChanges works fine when changing something in the UI, but I want to trigger my subscribe function logic as soon as I have finished initializing the FormBuilder object in my constructor to handle the initial conditions.

In that case what I do is quite simple:

    this.searchForm.valueChanges
        .pipe(startWith(initialValues)).subscribe(value =>
        {
            // whatever you want to do here
        });

initialValues is the raw data you've initialized the form with. You could probably just put in searchForm.getRawValue() too.

This just causes the observable to fire immediately.

---

Important: There is a subtle problem with the original answer if you're using the async pipe to subscribe instead of an explicit subscribe().

In Angular you can subscribe explicitly to an observable (as shown above), but it's equally common to use the async pipe. An example looks like this:

model = {
   firstName: this.searchForm.valueChanges.pipe(startWith(initialValues), map(values => values.firstName.toUpperCase())
};

and then in your template display the form value:

First name: {{ model.firstName | async | json }}

There is a problem with this approach that is quite subtle.

• The startWith operator will capture the value when you create the observable, which will be correct the first time.
• However if you re-subscribe to the observable it still be using the original values even if the form has changed. This can manifest itself if the UI is hidden and then displayed again (causing a new subscription).

Possible solutions:

1. Use defer such that the value of this.searchForm.value will be evaluated each time the observable is subscribed to.

   defer(() => this.searchForm.valueChanges.pipe(startWith(this.searchForm.value), 
               map(values => values.firstName.toUpperCase())
   

2. Use shareReplay. This only works here with refCount: false and therefore I do not recommend it since it won't get cleaned up properly.

   this.searchForm.valueChanges.pipe(startWith(initialValues), 
                map(values => values.firstName.toUpperCase(), 
                shareReplay({ refCount: false, bufferSize: 1 })
   

3. Hypothetical: If startWith had a lambda then you could use that. Unfortunately it doesn't right now:

   startWith(() => this.searchForm.value)
   

Note: If you're using subscribe explicitly then you don't need to worry about this issue.

I use patchValue to reset the value in the form and trigger the change programmatically:

this.MyForm.controls["MyField"].patchValue(MyField);

Subscribe to changes:

this.MyForm.get("MyField").valueChanges.subscribe(val => {
    if (val) {
        const MyField = this.MyForm.get("MyField");
    }
});

The title and description of your question are a bit misleading. Which is it? (i)

• Do you want to update the validity status of a field when changing its value programmatically?
• Or do you want to make sure your subscription to the valueChanges of a field gets called when changing its value programmatically?

Anyways, check out this Plunkr: https://plnkr.co/edit/4V4PUFI1D15ZDWBfm2hb?p=preview

You'll see that when you set the field value programmatically like this:

this.myForm.get('myField').setValue(newValue);

Both the validity and the valueChanges observable for the field are updated. So, it looks like you're trying to recreate a behavior that's already here.

However, the dirty property of the field is NOT updated when changing its value programmatically (as per the doc: "A control is dirty if the user has changed the value in the UI"). Could it be that you are checking the dirty property to indicate field errors and that you have the illusion that the validity status is not updated, when in fact it's just the dirty property that's not updated?

(i) These two things are different. You should NOT subscribe to valueChanges to manually trigger validation. Validation should be enforced by declaring validators in your form model.