problem with formGroup

[dull tapir]

in the input field of the formGroup is printend the code of the function

<div class="spacer"></div>
<mat-card class="example-card">
    <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Login</mat-card-title>
        <mat-card-subtitle>Enter your credentials</mat-card-subtitle>
    </mat-card-header>
    <div class="spacer2"></div>
    <mat-card-content>
        <form  class="example-form" [formGroup]="loginForm">
            <mat-form-field class="example-full-width">
                <mat-label>Email</mat-label>
                <input matInput formControlName="email"  placeholder="[email protected]">
                
            </mat-form-field>
            <div class="spacer3"></div>
                <mat-form-field class="example-full-width">
                    <mat-label>Password</mat-label>
                    <input formControlName="password" type="text" matInput placeholder="Password" value="">
                </mat-form-field>
                <button (click)="prova()">prova</button>
        </form>
    </mat-card-content>
</mat-card>

export class LoginCardComponent {
  loginForm = new FormGroup({
    email: new FormControl(Validators.required),
    password: new FormControl(20)
    });



    prova(){
      console.log(this.loginForm.get("email")?.value)  
    }

[young garden]

new FormControl(Validators.required): you pass, as initial value of the form control, the validator. That's incorrect. the validator if supposed to be the second argument. The first is the value.