Angular 15 Reactive Forms: How to Reset Form Control Values Without Affecting Validators?
I'm upgrading from an older version and I've hit a wall trying to I am working with Angular 15 and using reactive forms to manage a user profile form... I need to reset certain form controls to their default values when a user clicks a 'Reset' button, but I want to keep the validators intact and not lose the validation state. The challenge I am facing is that using `reset()` on the form resets the entire form, including validators, which is not the desired behavior. Here’s a code snippet of how I set up my form: ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-user-profile', templateUrl: './user-profile.component.html', }) export class UserProfileComponent implements OnInit { userProfileForm: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.userProfileForm = this.fb.group({ username: ['', Validators.required], email: ['', [Validators.required, Validators.email]], age: [null, [Validators.required, Validators.min(18)]], }); } resetForm() { this.userProfileForm.reset({ username: 'defaultUser', email: 'user@example.com', age: null, }); } } ``` In the `resetForm` method, I want to achieve the reset functionality, but when I call `this.userProfileForm.reset()`, it seems to clear the validators as well, and I lose the validation state. I’ve also tried using `patchValue()` to set each control individually but it doesn’t help with resetting the touched state. Is there a way to reset the values without clearing the validators or affecting the form's dirty/touched state? Any insights or workarounds would be really appreciated! This is happening in both development and production on Windows 11. Any feedback is welcome! Thanks, I really appreciate it! Has anyone dealt with something similar? What's the correct way to implement this?