Angular 9 mat-form-field 无轮廓，无标签

Question

Please tell me how can I get rid of the "line" in mat-form-fields ! Please take a look at the attached picture for better understanding !

Thank You !

Here is my code :

HTML CODE
    <div formGroupName="settingsfield" fxLayout="column">
        <mat-form-field fxFlex class="mat-block">
            <input type="number" min="10" max="12000" matInput
                    formControlName="mysettings1">
        </mat-form-field>
     </div>


CSS
.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
 border-top-width: 0;
 }

.mat-form-field-wrapper {
 padding-bottom: 0px;
 margin-bottom: 0px;
 margin-top: 0px;
 }

.mat-form-field-label-wrapper {
 padding-top: 0px;
 padding-bottom: 0px;
 margin-bottom: 0px;
 margin-top: 0px;
 }

Answer 1

::ng-deep .mat-form-field-underline{
  display:none;
}

It is usually done this way! But its in the middle of the cell for you. If this doesn't work, kindly provide a stackblitz example.