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>
<mat-form-field appearance="outline">
<mat-label>Last Name</mat-label>
<input matInput placeholder="Last Name">
</mat-form-field>
</div>
<div >
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input matInput placeholder="Email">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Phone Number</mat-label>
<input matInput placeholder="Phone Number">
</mat-form-field>
</div>
<div >
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input type="password" matInput placeholder="Password">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Confirm Password</mat-label>
<input type="password" matInput placeholder="Confirm Password">
</mat-form-field>
</div>
</form>
Author by
BKK
Interested in Java, Angular, React Js, Docker, Openshift, Postgresql, MS SQL, Azure ChatBot.
Updated on June 09, 2022Comments
-
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.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> <mat-form-field appearance="outline"> <mat-label>Last Name</mat-label> <input matInput placeholder="Placeholder"> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Email</mat-label> <input matInput placeholder="Placeholder"> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Phone Number</mat-label> <input matInput placeholder="Placeholder"> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Password</mat-label> <input type="password" matInput placeholder="Placeholder"> </mat-form-field> <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 almost 5 yearsgroup your elements in div which you want them in single row
-