Forms: State that setErrors() will make status === INVALID regardless of value passed for key in Angular

Explanation of the problem

The current behavior of the setErrors example for AbstractControl in Angular’s documentation is that it shows passing true for the key. However, the issue is that the control’s status will always be set to INVALID, regardless of the value of the key or even if an empty object is passed to the setErrors function. This can lead to confusion when trying to clear errors in code, particularly when doing integration (template) testing, where the goal is to set an error, check the template, and then clear the error and check that any alerts have gone away.

Steps to reproduce:

The following code block illustrates the problem:

const login = new FormControl("someLogin");
login.setErrors({
  "notUnique": true
});

expect(login.valid).toEqual(false);
expect(login.errors).toEqual({"notUnique": true});

login.setErrors({"notUnique": false});
expect(login.valid).toEqual(true); //will still be INVALID since the check: if(this.errors) will return TRUE

Expected behavior:

The documentation should be updated to explicitly state how to clear errors in code. This can be done by setting a new valid value or by passing null to the control.setErrors() function. Alternatively, in the _calculateStatus() function, the control’s status should only be set to INVALID if at least one key in the errors object is set to true.

The motivation for this change is to provide a clear and accurate explanation of how to clear errors in code, particularly when doing integration (template) testing, in order to check that any alerts have gone away.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Forms: State that setErrors() will make status === INVALID regardless of value passed for key in Angular

The issue at hand is the need to selectively remove errors from form controls in Angular, rather than having to clear all errors at once. This is particularly relevant when working with custom errors that are set on specific inputs, as these errors may need to be removed independently of other errors that may have been added by other validators.

One solution to this problem is to create utility methods that can be used to add or remove errors from a form control. The first answer provided a sample implementation of these methods in the form of removeErrors and addErrors which can be used to selectively remove or add errors to a form control. The removeErrors method takes in an array of keys and an AbstractControl object. It checks if the control and keys are valid, if they are it then reduces the errors by deleting the key from the errors object and sets the remaining errors to the control. If there are no errors left, it sets the errors to null.

public static removeErrors(keys: string[], control: AbstractControl) {
    if (!control || !keys || keys.length === 0) {
      return;
    }

    const remainingErrors = keys.reduce((errors, key) => {
      delete errors[key];
      return errors;
    }, { ...control.errors });

    control.setErrors(remainingErrors);

    if (Object.keys(control.errors || {}).length === 0) {
      control.setErrors(null);
    }
  }

The addErrors method takes in an object of errors and an AbstractControl object, it checks if the control and errors are valid, if they are it then sets the errors to the control.

public static addErrors(errors: { [key: string]: any }, control: AbstractControl) {
    if (!control || !errors) {
      return;
    }

    control.setErrors({ ...control.errors, ...errors });
  }

Other popular problems with Angular

Problem:

One of the most common problems with Angular is change detection performance issues. When an application becomes large and complex, it can become slow and unresponsive due to the way change detection works in Angular. The framework checks for changes in the component tree by comparing the current and previous values of all properties in all components. This can lead to poor performance if there are many complex bindings or if change detection is triggered too frequently.

Solution:

One solution to this problem is to use the OnPush change detection strategy. This strategy only checks for changes in a component when an input property value changes or an event is emitted by the component. By using OnPush, developers can reduce the number of checks performed by the change detection mechanism, resulting in improved performance. Additionally, developers can use the ChangeDetectorRef to manually trigger change detection for specific parts of the application, rather than checking the entire application.

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  ...
}

Problem:

Another popular problem with Angular is dealing with complex nested forms. When a form becomes large and complex, it can become difficult to manage the form’s state, validation, and error handling. This can lead to a lot of boilerplate code, making it hard to read and maintain.

Solution:

Most popular use cases for Angular

1. Angular can be used for building dynamic, client-side web applications. It provides a powerful set of features that make it easy to create complex and interactive user interfaces, such as two-way data binding, dependency injection, and a powerful template language. Angular’s component-based architecture allows developers to build applications as a collection of reusable, self-contained components, making it easy to maintain and test the application.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
  title = 'My Angular App';
}