How to set only two input fields in a row in Angular Form

10,660

while continuing to use Angular Material, you can set a div around each pair to get what you want... working example @ 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>
Share:
10,660
BKK
Author by

BKK

Interested in Java, Angular, React Js, Docker, Openshift, Postgresql, MS SQL, Azure ChatBot.

Updated on June 09, 2022

Comments

  • BKK
    BKK over 1 year

    I am new to Angular development, trying to create a registration form where I need to have two columns in a row , like Firstname ,Lastname in one row followed by Phone,Email and Password,Confirm password.I am using mat-form-field, but when I add a new field all are placed next to each other as shown in below picture, I want them in next line.

    current form image

    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>
    

    Please help me out .Thank You.

    • super cool
      super cool almost 5 years
      group your elements in div which you want them in single row