ERROR TypeError: Cannot delete property '0' of [object Array]

[runic grotto]

The error seems unrelated to your code

[sharp fog]

I would provide more context, I'm also doing other stuff with onSubmit

  onSubmit(): void {
    this.authService.login$.next(this.loginForm); 
    this.store.dispatch(authActions.login({ loginForm: this.loginForm }));
  }

export class AuthService {
  login$ = new Subject<FormGroup>();
  constructor() {
    this.login$
      .pipe(
        tap(() => this.loginLoading$.next(true)),
        switchMap((loginForm) => {
          return this.authApiService.login(loginForm.value).pipe(
            tap((response) => {
              this.setAccessToken(response.accessToken);
              this.setCurrentUser(response.userId);
              this.router.navigate(['/']);
            }),
            catchError((error) => {
              console.log(loginForm);
              if (error.error.error === 'Invalid username') {
                loginForm.get('username')?.setErrors({ invalidUsername: true });
              }
              if (error.error.error === 'Invalid password') {
                loginForm.get('password')?.setErrors({ invalidPassword: true });
              }
              this.router.navigate(['/login']);
              this.loginLoading$.next(false);
              return EMPTY;
            })
          );
        }),
        takeUntilDestroyed()
      )
      .subscribe(() => this.loginLoading$.next(false));
  }
}

I noticed that if I remove at least one of them, the error doesn't show

this.authService.login$.next(this.loginForm);
or
this.store.dispatch(authActions.login({ loginForm: this.loginForm }));

I also noticed I'm getting other errors when I try to login with an incorrect username or password

VM4292:1 ERROR TypeError: Cannot assign to read only property 'errors' of object '[object Object]'
at FormControl.setErrors (forms.mjs:2233:20)
at auth.service.ts:57:44
at catchError.js:10:39
at OperatorSubscriber._error (OperatorSubscriber.js:23:21)
at OperatorSubscriber.error (Subscriber.js:40:18)
at source.subscribe._a (tap.js:28:28)
at OperatorSubscriber._error (OperatorSubscriber.js:23:21)
at OperatorSubscriber.error (Subscriber.js:40:18)
at OperatorSubscriber._error (Subscriber.js:64:30)
at OperatorSubscriber.error (Subscriber.js:40:18)

The top answer here is the most relevant I could find, though I still don't understand why the subject in my service is conflicting with the state

https://stackoverflow.com/questions/44288164/cannot-assign-to-read-only-property-name-of-object-object-object

[runic grotto]

There are some issues there: why is the FormGroup passed in your store? You want the value only.

And the service should not subscribe: that's your login component duty.

First rule of state management: store shared data only: the login credentials are not meant to be shared, do not put them in a store.

[sharp fog]

I see, I'm currently converting my "subject in a service" project into NGRX, I used to pass FormGroup in my service so that I could just trigger the error there in the catchError block, if I only pass values I don't know how I would trigger an error with my formGroup.

[runic grotto]

Do it in the login component directly: you are using an over complicated solution.

Even subject in a service should not care about a login form. That should only lives in the component.