The inputs for username and password are not displayed until I click somewhere. Either on the login button or wherever on the above buttons.

before I click:

after I click:

Angular : 13

log-in.component.html

    <div  fxLayout="row" fxLayoutAlign="center center">
        
      <mat-card >
          
        <mat-card-header>
          <mat-card-title>Log in</mat-card-title>
        </mat-card-header>
          
    
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            
          <!--    Benutzername Field    -->
          <mat-form-field appearance="outline">
            <mat-label>Benutzername</mat-label>
            <input
              matInput
              type="text"
              formControlName="username">
            <!--  hier wird das icon von benutzernane platziert  -->
            <mat-icon matSuffix>person</mat-icon>
          </mat-form-field>
          <!--   ENDE - Benutzername Field    -->
            
            
          <!--    Kennwort Field    -->
          <mat-form-field appearance="outline">
            <mat-label>Kennwort</mat-label>
            <input
              matInput
              type="password"
              formControlName="password">
              <!--  hier wird das icon von Kennwort platziert  -->
            <mat-icon matSuffix>password</mat-icon>
          </mat-form-field>
          <!--    ENDE - Kennwort Field    -->
    
                <button
                    mat-stroked-button color="primary"
                    type="submit"
                    >Anmelden</button>
    
            </form>
        </mat-card>
    </div>

log-in.component.ts

    @Component({
      selector: 'app-log-in',
      templateUrl: './log-in.component.html',
      styleUrls: ['./log-in.component.css']
    })
    export class LogInComponent implements OnInit {
        form: FormGroup = new FormGroup({
            name: new FormControl(''),
            password: new FormControl(''),
          });
          serverErrorPasswordMessage:string = '';
          submitted = false;
    
      constructor(private formBuilder: FormBuilder, private http: HttpClient, private router: Router) { }
    
      ngOnInit(): void {
      }
      onSubmit(): void {               
      }

UPDATE: that is what i see in the console:

CodePudding user response：

your error message states that the control "username" cannot be found on your FormGroup.

Either change your view control name to "name"

        <input
              matInput
              type="text"           \/ *** here    
              formControlName="username">

or your form control definition to "username"

form: FormGroup = new FormGroup({
             \/ *** here
            name: new FormControl(''),
            password: new FormControl(''),
          });