Currently working on setting up a form using Angular. Within the hotel.view.html file, there is a table that looks like this:
<table id="rooms">
<tr>
<td>Room Type</td><td>Beds</td><td>Q.ty</td>
</tr>
<tr>
<td><input [(ngModel)]="HotelModel.rooms[0].type" name="type" type="text"></td>
<td><input [(ngModel)]="HotelModel.rooms[0].beds" name="beds" type="number" class="smallField"></td>
<td><input [(ngModel)]="HotelModel.rooms[0].qty" name="qty" type="number" class="smallField"></td>
</tr>
</table>
In the hotel.component.css file, there are styles for two classes: .smallField and .bigField.
.smallField {
display: inline-block;
width: 50px;
}
.bigField {
display: inline-block;
width: 170px;
}
The "display: inline-block;" property was added to accommodate DIV elements initially, but now it's not necessary.
The table rows with fields are displayed correctly. Now, I want to add a new row when a button is pressed. Here is how I do it:
$("#addRoom").on("click", function() {
$('#rooms tr:last').after(
'<tr><td><input [(ngModel)]="HotelModel.rooms[' + rm + '].type" name="type" type="text"></td>' +
'<td><input [(ngModel)]="HotelModel.rooms[' + rm + '].beds" name="beds" type="number" class="smallField"></td>' +
'<td><input [(ngModel)]="HotelModel.rooms[' + rm + '].qty" name="qty" type="number" class="smallField"></td></tr>');
rm = rm + 1;
});
The newly added row appears correctly, but the fields don't inherit the "smallField" class, resulting in an inconsistent look:
https://i.stack.imgur.com/NebIa.png
Any suggestions on how to style these fields properly? Thank you!