如何在Angular表单中将两个输入字段设置为同一行？

Question

我是Angular开发新手，尝试创建一个注册表单，需要在一行中拥有两列，例如：名字、姓氏在一行中，然后是电话、电子邮件和密码、确认密码。我正在使用mat-form-field，但当我添加一个新字段时，所有字段都会像下图所示放置在一起，而我希望它们在下一行。

当前表单图片

component.html

<div class="container">
  <div class="row">
    <div class="registration-form col-md-6" style="max-width: -webkit-fill-available;">
      <div class="main-div" style="width: inherit;text-align: center">
        <div class="panel">
          <h2> Registration Form</h2>
        </div>
        <div class="alert alert-danger" *ngIf="errorMsg">
          {{errorMsg}}
        </div>
        <form #registartionForm="ngForm" (ngSubmit)="onSubmit()" novalidate>
          <mat-form-field appearance="outline">
            <mat-label>First Name</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Last Name</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Email</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Phone Number</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Password</mat-label>
            <input type="password" matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Confirm Password</mat-label>
            <input type="password" matInput placeholder="Placeholder">
          </mat-form-field>

        </form>
        <div>
          <button type="submit" class="btn btn-primary login" (click)="btnClick();">Register</button>
        </div>
      </div>
    </div>
  </div>
</div>

请帮我一个忙。谢谢。

- BKK

---

将您想要放在单行中的元素分组到 div 中。 - super cool

Answer 1

在继续使用Angular Material的同时，您可以在每对元素周围设置一个div来实现您想要的效果...工作示例请参见https://stackblitz.com/edit/angular-qqrwni

<form #registartionForm="ngForm" (ngSubmit)="onSubmit()" novalidate >

          <div >
            <mat-form-field appearance="outline">
              <mat-label>First Name</mat-label>
              <input matInput placeholder="First Name">
            </mat-form-field>
            &nbsp;
            <mat-form-field appearance="outline">
              <mat-label>Last Name</mat-label>
              <input matInput placeholder="Last Name">
            </mat-form-field>
            &nbsp;
          </div>
          <div >
            <mat-form-field appearance="outline">
              <mat-label>Email</mat-label>
              <input matInput placeholder="Email">
            </mat-form-field>
            &nbsp;
            <mat-form-field appearance="outline">
              <mat-label>Phone Number</mat-label>
              <input matInput placeholder="Phone Number">
            </mat-form-field>
            &nbsp;
          </div>
          <div >
            <mat-form-field appearance="outline">
              <mat-label>Password</mat-label>
              <input type="password" matInput placeholder="Password">
            </mat-form-field>
            &nbsp;
            <mat-form-field appearance="outline">
              <mat-label>Confirm Password</mat-label>
              <input type="password" matInput placeholder="Confirm Password">
            </mat-form-field>
          </div>
        </form>

- Akber Iqbal

Answer 2

最好使用Bootstrap，然后将此代码粘贴到您的HTML文件中。

 <div class="container">
  <h1>Register</h1>
  <p>Please fill in this form to create an account.</p>
  <hr>
  <label for="email"><b>Email</b></label>
  <input type="text" placeholder="Enter Email" name="email" required>
  <label for="psw"><b>Password</b></label>
  <input type="password" placeholder="Enter Password" name="psw" required>
  <label for="psw-repeat"><b>Repeat Password</b></label>
  <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
  <button type="submit" class="registerbtn">Register</button>
 </div>

- ArunJaganathan