How to put two input fealds in anguler align horizonatal? - html

Question

I need to put two input fields with labels as below.
But In using angular, some data R fields related input not visible. Then, it should be like below.
My code
<div>
<div>
<label i18n="k" *ngIf="model" id="'k'">
<br />
<br />
K:
{{model.k}} </label>
<label i18n="N" *ngIf="model"
id="'N'">
<br />
<br />
N:
{{model.n}} </label>
</div>
<div>
<mat-form-field [formGroup]="DetailForm">
<label *ngIf="isVisible(model.r)">R</label>
<input *ngIf="isVisible(model.r)" matInput formControlName="rate"
[type]="'number'" [placeholder]="'rate'" [required]="false" [readonly]="false" [spaced]="false">
<label>Comment</label>
<input matInput formControlName="c" [type]="'text'" [placeholder]="'comment'" [required]="false"
[readonly]="false" [spaced]="false">
</mat-form-field>
</div>
</div>
But I tried a different way when two input available it shows like below.
need some expert help to resolve this.

Answer 1

I think you need to use 2 different mat-form-fields like this:
<mat-form-field>
<mat-label>Rate</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field>
<mat-label>Comment</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
Or have a look at this stackblitz, i put a very small demo of the above changes there:
https://stackblitz.com/edit/angular-material-starter-r7khp2