How to customize input field length in AngularJS? - angularjs

Question

I have 4 input fields and type of each field is number. I have implemented it as follows
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Available Amount : <br/><input type="number"
class="mr-3"
[(ngModel)]="selectedItemAvailability"
[disabled]="true">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Enter Quantity : <br/><input type="number"
[min]="1"
[max]="selectedItemAvailability"
[(ngModel)]="selectedItemQuantity">
</label>
</div>
</div>
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Price : <br/><input type="number"
[min]="0"
class="mr-3"
[(ngModel)]="selectedItemPrice">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Item Discount : <br/><input type="number"
[min]="0"
[max]="100"
class="mr-3"
[(ngModel)]="selectedItemDiscount">
</label>
</div>
</div>
Once the program is executed, it gives me the interface as below,
When I use input type as text, it gives the expected output.
I want to make all the input fields same in length while using the input type as number. How can I achieve this?
Expected Output:

Answer 1

It seems your code works perfect. Please check stackblitz for the detail:
https://stackblitz.com/edit/angular-ivy-b7xnya?file=src/app/app.component.html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Available Amount : <br /><input type="number" class="mr-3">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Enter Quantity : <br /><input type="number">
</label>
</div>
</div>
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Price : <br /><input type="number" [min]="0" class="mr-3">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Item Discount : <br /><input type="number" class="mr-3">
</label>
</div>
</div>