Angular Reactive Forms not clear validation errors after resetting the form with new values...

I'm working with Angular Reactive Forms and facing an issue with dynamic validation on secure fields in an Edit Modal.

I have two modes:

• 
  View Mode: Secure fields (username, password, notes) are encrypted strings (~1200 characters long).
  
  
• 
  Edit Mode: After decryption, the fields become editable, and I must enforce a max length of 250 characters.
  

Initially, no length validation is needed because the encrypted string is large. But in edit mode, I dynamically apply the maxLength validator (250 characters) after decryption process.

Dynamic validation example

private getSecuInfoMaxLengthValidator(key: keyof SecureFieldsState, length: number): ValidatorFn {
return (control: FormControl<string | null>): ValidationErrors | null => {
const maxLengthValidatorFn = Validators.maxLength(length);

if (!this._secureService) {
return maxLengthValidatorFn(control);
}

const isEditing = this._secureService.secureFieldsState$$()[key].isEditting;
const isEncrypted = this._secureService.isSecureGroupEncrypted$$();

if (!isEditing && isEncrypted) {
return null; // skip validation for encrypted view mode
}

return maxLengthValidatorFn(control);
};
}


Form

private createForm(): FormGroup<SomeFormType> {
return this._fb.group({
notes: [null, [this.getSecuInfoMaxLengthValidator('notes', 2000)]],
password: [null, [CustomValidators.requiredInput(), this.getSecuInfoMaxLengthValidator('password', 250)]],
registrationUrl: [null, Validators.pattern(ValidatorsConstants.URL_VALIDATION_REGEXP)],
username: [null, [CustomValidators.requiredInput(), this.getSecuInfoMaxLengthValidator('username', 250)]],
}) as FormGroup<SomeFormType>;
}


The Problem: When the user cancels editing (presses ESC), I reset the form back to the encrypted values:

public stopEditSecureControl(isCanceled: boolean, key: keyof SecureInfoFields) {
if (isCanceled) {
this.resetFormValues();
return;
}
}

private resetFormValues(): void {
this.switchControlsToViewMode();
this._secureService.resetSecureState();
this.setFormValues();
}

private setFormValues(someData: SomeResponse): void {
this.form.setValue({
notes: someData.notes,
password: someData.password,
username: someData.username,
});
}


After calling setFormValues() with encrypted values:

• The maxLength validator still throws an error (maxlength: 250).
• Locally it works fine, but on QA / Staging — the error stays.

After resetting the form with encrypted values, the maxLength error should be cleared because the validator should skip validation in View Mode.

Should I add additionally the clearValidators and updateValueAndValidity methods to the corresponding control to make it work. I want to understand such behavior

Continue reading...