Material UI 直到我点击元素才显示

Question

用户名和密码的输入直到我点击某个地方才显示。在登录按钮上或上述按钮上的任何位置。

之前我点击：

之后我点击：

Angular : 13

log-in.component.html

    <div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
        
      <mat-card class="box">
          
        <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"
                    class="btn-block">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 {               
      }

更新：这就是我在控制台中看到的：

Answer 1

您的错误消息表明在您的 FormGroup 上找不到控件“用户名”。

要么将您的视图控件名称更改为“名称”

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

或您的表单控件定义为“用户名”

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

Material UI 直到我点击元素才显示

Material UI Element does not shown until I click

angular-material

angular

angular-reactive-forms