小编BKK*_*BKK的帖子

如何在Angular Form中只设置一行中的两个输入字段

我是 Angular 开发的新手,试图创建一个注册表单,我需要在其中连续有两列,例如 Firstname ,Lastname 在一行中,然后是电话,电子邮件和密码,确认密码。我正在使用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" …
Run Code Online (Sandbox Code Playgroud)

javascript css typescript angular-material angular

4
推荐指数
1
解决办法
8617
查看次数

标签 统计

angular ×1

angular-material ×1

css ×1

javascript ×1

typescript ×1