Essential Angular Form APIs You Should Know

Vugar Abdullayev
Apr 6 · 3 min read
The more frustrating problem you face in development, the more amazing solution you end up with.

Angular reactive forms is a powerful module for managing our forms in web applications but sometimes to solve particular issue we may implement some unnecessary code without realizing there are already builtin solutions available. In this article we are going to review some of them.

emitEvent:

When we patchValue, setValue, enable or disable form we have additional option emitEvent, onlySelf to pass as parameter.

emitEvent is an event triggered when our form value or status changes. Hence in official documentation:

*emitEvent: When true or not supplied (the default), both the `statusChanges` and `valueChanges` observables emit events with the latest status and value when the control value is updated

Side note: Enabling or disabling form controls also triggers value change.

So basically when we call setValue, patchValue, disable, enable control it triggers value change by default.

Use case:

Assume you have a custom form control which implements ControlValueAccessor. You have listener on parent whenever form value changes, trigger update data api. When you change form value from parent and in order to refect this change on custom control you implement this below method:

public writeValue(newValue: number): void {
this.value = newValue;
this.streetControl.patchValue(newValue, { emitEvent: false });
}

If we had not setted emitEvent to false, it would trigger valueChange so parent form would trigger unnecessary api which we want to avoid here.

updateValueAndValidity:

Before we dig into another option onlySelf, lets first understand updateValueAndValidatity method by official documentation:

/*** Recalculates the value and validation status of the control.* By default, it also updates the value and validity of its ancestors.* @param opts Configuration options determine how the control propagates changes and emits events  after updates and validity checks are applied.* `onlySelf`: When true, only update this control. When false or not supplied, update all direct ancestors. Default is false.* `emitEvent`: When true or not supplied (the default), both the `statusChanges` and `valueChanges` observables emit events with the latest status and value when the control is updated. When false, no events are emitted.*/updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
....

In a nutshell, it recalculates the value and validation status of the control.It is triggered when control is first initialiazed or when we call patchValue, setValue, addControl, setControl or removeControl methods of form control.

Use case:

It is useful when we update validators of form control. Because when we update validators, it does not recalculate validation status by default, you need to call it additionally. For instance, assume we have a form called postalCode which has dynamic validator(here dependant on country field). When country is United States, we set validator max length 5 , in all other cases max length 7. In order to achive that, we would code like below DEMO:

When country value changed, we add and revalidate status of postal code. But there is small issue here, updateValueAndValidity will also trigger updateValueAndValidity method on parent form. See below code

What if we have asynchronous validators on parent? So we need to prevent this unnecessary check. This is where onlySelf option comes in.

onlySelf:

According to official documentation:

* `onlySelf`: When true, each change only affects this control, and not its parent. Default is false.

Simply, when we call updateValueAndValidity this also triggers this change on parent. To solve issue in previous example, we need just to add new parameter: DEMO

this.addressForm.get("postalCode").updateValueAndValidity({emitEvent: false, onlySelf: true});

There are also other essential methods available such as markAsTouched, markAsDirty but since they are straitforward I did not touch them. You can see screenshot below for definitions.

That’s all. Hope you found it helpful. Thanks for reading.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Vugar Abdullayev

Written by

Angular Developer

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store