I’m encountering an issue with my Angular application where the form doesn’t detect autofill changes, resulting in the form submission button remaining disabled even when the form is filled.

Additionally, on the production build of the application, after saving the password and logging out, I’m not able to edit the email field or see the password field when logging back in.

To address this, I initially attempted to handle autofill behavior using various methods, including setting form control values manually and refreshing the page. However, none of these solutions seem to work reliably.

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', [Validators.required]),
    });
  }

  ngAfterViewInit(): void {
    this.handleAutofill();
  }

  handleAutofill(): void {
    setTimeout(() => {
      if (this.emailInput && this.emailInput.nativeElement) {
        const emailValue = this.emailInput.nativeElement.value;
        if (emailValue) {
          this.loginForm.get('email')?.setValue(emailValue);
        }
      }

      if (this.passwordInput && this.passwordInput.nativeElement) {
        const passwordValue = this.passwordInput.nativeElement.value;
        if (passwordValue) {
          this.loginForm.get('password')?.setValue(passwordValue);
        }
      }
    });
  }

I’ve tried implementing various workarounds, including using AfterViewInit and ChangeDetectorRef to handle autofill behaviour, some of them are mentioned in this thread -: https://github.com/angular/angular/issues/30616

but none of these seems to work for or others as mentioned in some latest comments in this same thread(https://github.com/angular/angular/issues/30616#issuecomment-1634908898)

is there any solution for this issue?