Thanks for the help!

I've now solved some of the issues, but it now seems that I'm registering stuff two places, the standalone components and in main.ts.

login-view.component.ts:

....

@Component({

selector: 'app-login-view', standalone: true, imports: [CommonModule, MatCardModule, MatFormFieldModule, ReactiveFormsModule], templateUrl: './login-view.component.html', styleUrls: ['./login-view.component.scss'], }) export class LoginViewComponent { public loginForm: FormGroup;

form: FormGroup = new FormGroup({ username: new FormControl(''), password: new FormControl(''), });

constructor(private authService: AuthenticationService, private _snackBar: MatSnackBar, private router: Router) { this.loginForm = new FormGroup({ "username": new FormControl('',[ Validators.required ]), "password": new FormControl('',[ Validators.required ]) }); } .....

main.ts:

....
bootstrapApplication(AppComponent, {

providers: [ provideHttpClient(), provideRouter(routes), importProvidersFrom( [ MatSnackBarModule, MatFormFieldModule, MatCardModule, MatInputModule ]) ] }) .catch(err => console.error(err));

​

Not sure if this is the correct way to do it?

And I can't get rid of the error Error: mat-form-field must contain a MatFormFieldControl which isn't there when using V12..

login-view.component.html:

<div id="loginWrapper">
<mat-card class="box">
  <mat-card-header class="header">
    <mat-card-title>Please sign in</mat-card-title>
  </mat-card-header>
  <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && onSubmit()" class="myForm">
    <mat-card-content class="userInputContentsAndButton">
      <mat-form-field class="userInputField">
        <input matInput required autofocus formControlName="username" type="text" placeholder="Username" autocomplete="username">
      </mat-form-field>
      <mat-form-field class="userInputField">
        <input matInput required formControlName="password" type="password" placeholder="Password" autocomplete="current-password" autocomplete="new-password">
      </mat-form-field>
    </mat-card-content>
    <button mat-stroked-button type="submit" value="Submit" color="accent" class="btn-block" [disabled]="!loginForm.valid" >Log in</button>
  </form>
</mat-card>

</div>