Question

我想在不同的行上显示用户名区域和密码区域，并在行之间留有空格。这是我的html代码

这是登录角度GUI的HTML。

<mat-card class="card">
<mat-card-content>         
  <!-- CONTENT HERE -->
  <form class="loginform" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <mat-form-field class="full-width"> 
     <div class="form-group">
        <mat-label for="username">Username</mat-label>
        <!-- <label for="username">Username</label>-->
        <input  matInput  placeholder="username"  type="username" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">

        <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
            <div *ngIf="f.username.errors.required">Username is required</div>
        </div>
     </div>
   </mat-form-field>  
   <mat-form-field class="full-width">    
    <div class="form-group">
            <mat-label for="password">Password</mat-label>
            <input  matInput  placeholder="password"  type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
          <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
            <div *ngIf="f.password.errors.required">Password is required</div>
        </div>
    </div>
   </mat-form-field>  

    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Login</button>

        <a routerLink="/register" class="btn btn-link">Register</a>
    </div>

</form>  
</mat-card-content>
<mat-card-actions>
  <!-- REGISTER BUTTON -->
</mat-card-actions>

当前，我在一行上获得用户名和密码。我想在两行中显示GUI，在这两行之间有一个区域。

当我使用此code时，用户名和密码位于不同的行：

<mat-card-content>
  <form class="my-form">
 <mat-form-field class="full-width">
        <mat-label>First Name</mat-label>
        <input  matInput  placeholder="First name"  name="fname"  required>
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Last Name</mat-label>
        <input  matInput  placeholder="Last Name" name="lname"  required>
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Address</mat-label>
        <input  matInput  placeholder="Address" name="address"  required>
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Email</mat-label>
        <input  matInput  placeholder="Email" name="email">
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Password</mat-label>
        <input  matInput  placeholder="Password"  name="password">
     </mat-form-field>

这是css文件

.loginform{
min-width: 150px;
max-width: 500px;
width: 100%;
}

.full-width {
  width: 100%;

更新：当我剪切/粘贴链接代码时，它也显示在一行而不是两行。

Answer 1

<br/>有效。感谢您在评论中的回答。

如何使用Angular 7表单在单独的线或区域上显示字段

1 个答案: