patchValue of Select with value not in options keeps the form valid

Explanation of the problem

When using the patchValue function to set a value to a Select box in Angular, a behavior inconsistency occurs. If the value being set does not exist in the Select options, the model is still updated with that value, and the field is considered valid. This behavior differs from the expected behavior, where setting a value that is not present in the options should either not set the value at all or set an empty value. To ensure that the issue has not already been reported, it is recommended to search GitHub for similar issues or pull requests before submitting a bug report. The following code snippet demonstrates the current behavior:

this.form.patchValue({
  selectField: 'd' // Value that doesn't exist in the options
});

To reproduce the problem, a reactive form with a Select box and the Validators.required validation can be set up. The Select box should have several options available, such as “a,” “b,” and “c.” Then, using the patchValue function, set the value of the Select box to a value that is not present in the options, for example, “d.” The issue can be observed in the behavior of the form. The following Plunkr example provides a minimal reproduction of the problem: Plunkr Link.

In the described use case, the motivation for changing the behavior of the patchValue function is to handle the import of previously saved form data. When users import their data, the current form needs to be patched with their supplied data. However, if the available values in a Select box have changed over time and the user has old data that includes values not present in the options, the field and the form remain valid after the import. This leads to a situation where no data is displayed in the Select box. It is unclear whether this behavior should be considered a bug or a feature request. The issue is encountered in an environment using Angular version 4.0.0-beta.6, running on CentOS 6.8 and the Chrome 56 browser.

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: patchValue of Select with value not in options keeps the form valid

To solve the issue described, the behavior of the patchValue function in Angular can be modified to align with the expected behavior. One approach is to implement custom validation logic that checks if the value being set exists in the Select options. If the value is not found, the field can be marked as invalid.

Here’s an example of how this can be implemented:

1. Modify the form control for the Select box to include custom validation logic:

import { ValidatorFn, AbstractControl } from '@angular/forms';

function validateSelectOption(options: string[]): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    if (options.indexOf(value) === -1) {
      return { invalidOption: true };
    }
    return null;
  };
}

// Inside the form creation
this.form = new FormGroup({
  selectField: new FormControl('', validateSelectOption(['a', 'b', 'c']))
});

2. Update the patchValue function to trigger the custom validation:

const valueToSet = 'd';
this.form.get('selectField')?.setValue(valueToSet);
this.form.get('selectField')?.updateValueAndValidity();

By implementing the custom validation logic, the Select box will correctly handle cases where the value being set is not present in the options. The field will be marked as invalid, ensuring that the behavior aligns with the expected behavior.

private dataSubject = new BehaviorSubject<any[]>([]);
data$ = this.dataSubject.asObservable();

<ng-container *ngIf="data$ | async as data">
  <div *ngIf="data.length > 0">
    // Display data here
  </div>
</ng-container>

import 'zone.js/testing';

beforeEach(() => {
  (window as any)['Promise'] = Promise;
});

@Injectable({ providedIn: 'root' })
export class SharedService {
  // Shared logic here
}

@Component({...})
export class ComponentA {
  constructor(private sharedService: SharedService) {}
  // Use the shared service here
}

@Component({...})
export class ComponentB {
  constructor(private sharedService: SharedService) {}
  // Use the shared service here
}

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

@Component({
  selector: 'app-button',
  template: `
    <button [class]="classes">
      {{label}}
    </button>
  `
})
export class ButtonComponent {
  @Input() label: string;
  @Input() classes: string;
}

# Install Ionic CLI
npm install -g @ionic/cli

# Create a new Ionic app with Angular
ionic start myApp --type=angular

# Add a new page to the app
ionic generate page myPage

# Build and run the app on a mobile device
ionic capacitor add ios
ionic capacitor copy ios
ionic capacitor open ios