Angular 11 Material MatFormField outline without a label

Question

I've got a requirements to have a collection edit form in a tabular format. The column headings will contain the label for the fields - so individual fields will not need labels. Now, if I ommit the label that leaves the text improperly centered in the input field. Is there any way around that?

<table class="simple">
                                    <thead>
                                        <tr>
                                            <th>Price</th>
                                            <th>Effective From</th>
                                            <th>Effective Until</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="product-row"
                                            *ngFor="let stockItemPrice of stockItemPrices().controls; let i=index" [formGroupName]="i">
                                            <td>
                                                <mat-form-field appearance="outline" floatLabel="never">
                                                    <input matInput placeholder="Price"
                                                           name="price"
                                                           formControlName="price"
                                                           required>
                                                </mat-form-field>
                                            </td>
                                            <td>
                                                <mat-form-field appearance="outline" floatLabel="never">
                                                    <input matInput placeholder="Effective From"
                                                           name="effectiveFrom"
                                                           formControlName="effectiveFrom"
                                                           [matDatepicker]="pickerFrom"
                                                           required>
                                                    <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
                                                    <mat-datepicker #pickerFrom></mat-datepicker>
                                                </mat-form-field>
                                            </td>
                                            <td>
                                                <mat-form-field appearance="outline" floatLabel="never">
                                                    <input matInput placeholder="Effective Until"
                                                           name="effectiveUntil"
                                                           formControlName="effectiveUntil" [matDatepicker]="pickerUntil">
                                                    <mat-datepicker-toggle matSuffix [for]="pickerUntil"></mat-datepicker-toggle>
                                                    <mat-datepicker #pickerUntil></mat-datepicker>
                                                </mat-form-field>
                                            </td>
                                            <td>
                                                <button (click)="removeQuantity(i)" mat-raised-button color="warn">Remove</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

question from:https://stackoverflow.com/questions/65926612/angular-11-material-matformfield-outline-without-a-label

Answer 1

Waitting for answers