javascript - How to avoid extra mat-form-field-underline in Angular material - Stack Overflow

admin管理员组

文章数量:1278981

I am having an issue finding why I get an extra mat-form-field-underline when using a ponent.

My page uses this markup:

<mat-form-field class="col-md-6">
        <app-mat-select-all 
            [data]="tractList$"
            formControlName="tractList"
            fieldName="name"
            [multiselect]=true
            labelText="Tract List"
            idField="guid"
            >
        </app-mat-select-all>
</mat-form-field>

And my custom ponent has the following template code

<form novalidate [formGroup]="form">
    <mat-form-field>
    <mat-label>{{labelText}}</mat-label>
    <mat-select  #select [multiple]="multiselect" [formControl]="selectField" >
      <div class="select-all">
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                          [ngModelOptions]="{standalone: true}"
                          [indeterminate]="isIndeterminate()"
                          [checked]="isChecked()" 
                          (click)="$event.stopPropagation()"
                          (change)="toggleAllSelection($event)">{{text}}</mat-checkbox>
      </div>
      <mat-option *ngFor="let item of data" [value]="item[idField]">
        {{item[fieldName]}}
      </mat-option>
    </mat-select>
    </mat-form-field>
    </form>

And it looks like this on the rendered page

When I go and add the following line to my parent style sheet all mat-form-field-underlines are gone which is not what I want. If I go and remove the mat-form-field in my custom ponent I only get one line but then the alignment of the mat-form-field-underline is off with the other ponents on page. So I need to find a way to only target the 2nd underline to be able to remove.

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

Here is a stackblitz sample which demonstrate this issue of the 2nd underline StackBlitz Sample

Here is the code when i inspect it and it seems that for some reason there is a mat-form-field inside a mat-form-field. Not sure why ?

<mat-form-field _ngcontent-jtb-c709="" class="mat-form-field col-md-6 ng-tns-c393-17 mat-primary mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder"><div class="mat-form-field-wrapper ng-tns-c393-17"><div class="mat-form-field-flex ng-tns-c393-17"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "0"
}--><div class="mat-form-field-infix ng-tns-c393-17"><app-mat-select-all _ngcontent-jtb-c709="" formcontrolname="tractList" fieldname="name" labeltext="Tract List" idfield="guid" _nghost-jtb-c804="" ng-reflect-field-name="name" ng-reflect-label-text="Tract List" ng-reflect-id-field="guid" ng-reflect-name="tractList" ng-reflect-form-control-name="tractList" class="ng-tns-c393-17 ng-untouched ng-pristine ng-valid" ng-reflect-multiselect="true" ng-reflect-data="[object Object],[object Object"><form _ngcontent-jtb-c804="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-valid"><mat-form-field _ngcontent-jtb-c804="" class="mat-form-field ng-tns-c393-18 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid"><div class="mat-form-field-wrapper ng-tns-c393-18"><div class="mat-form-field-flex ng-tns-c393-18"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "0"
}--><div class="mat-form-field-infix ng-tns-c393-18"><mat-select _ngcontent-jtb-c804="" role="bobox" aria-autoplete="none" aria-haspopup="true" class="mat-select ng-tns-c500-19 ng-tns-c393-18 ng-star-inserted mat-select-empty mat-select-multiple ng-untouched ng-pristine ng-valid" ng-reflect-multiple="true" ng-reflect-form="[object Object]" aria-labelledby="mat-form-field-label-19 mat-select-value-15" id="mat-select-14" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c500-19"><div class="mat-select-value ng-tns-c500-19" ng-reflect-ng-switch="true" id="mat-select-value-15"><span class="mat-select-placeholder mat-select-min-line ng-tns-c500-19 ng-star-inserted"></span><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--></div><div class="mat-select-arrow-wrapper ng-tns-c500-19"><div class="mat-select-arrow ng-tns-c500-19"></div></div></div><!--bindings={
  "ng-reflect-offset-y": "0"
}--></mat-select><span class="mat-form-field-label-wrapper ng-tns-c393-18"><label class="mat-form-field-label ng-tns-c393-18 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-19" ng-reflect-ng-switch="true" for="mat-select-14" aria-owns="mat-select-14"><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--><mat-label _ngcontent-jtb-c804="" class="ng-tns-c393-18 ng-star-inserted">Tract List</mat-label><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></label><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span></div><!--bindings={
  "ng-reflect-ng-if": "0"
}--></div><div class="mat-form-field-underline ng-tns-c393-18 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-18"></span></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="mat-form-field-subscript-wrapper ng-tns-c393-18" ng-reflect-ng-switch="hint"><!--bindings={
  "ng-reflect-ng-switch-case": "error"
}--><div class="mat-form-field-hint-wrapper ng-tns-c393-18 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
  "ng-reflect-ng-if": ""
}--><div class="mat-form-field-hint-spacer ng-tns-c393-18"></div></div><!--bindings={
  "ng-reflect-ng-switch-case": "hint"
}--></div></div></mat-form-field></form></app-mat-select-all><span class="mat-form-field-label-wrapper ng-tns-c393-17"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span></div><!--bindings={
  "ng-reflect-ng-if": "0"
}--></div><div class="mat-form-field-underline ng-tns-c393-17 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-17"></span></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="mat-form-field-subscript-wrapper ng-tns-c393-17" ng-reflect-ng-switch="hint"><!--bindings={
  "ng-reflect-ng-switch-case": "error"
}--><div class="mat-form-field-hint-wrapper ng-tns-c393-17 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
  "ng-reflect-ng-if": ""
}--><div class="mat-form-field-hint-spacer ng-tns-c393-17"></div></div><!--bindings={
  "ng-reflect-ng-switch-case": "hint"
}--></div></div></mat-form-field>

I am having an issue finding why I get an extra mat-form-field-underline when using a ponent.

My page uses this markup:

<mat-form-field class="col-md-6">
        <app-mat-select-all 
            [data]="tractList$"
            formControlName="tractList"
            fieldName="name"
            [multiselect]=true
            labelText="Tract List"
            idField="guid"
            >
        </app-mat-select-all>
</mat-form-field>

And my custom ponent has the following template code

<form novalidate [formGroup]="form">
    <mat-form-field>
    <mat-label>{{labelText}}</mat-label>
    <mat-select  #select [multiple]="multiselect" [formControl]="selectField" >
      <div class="select-all">
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                          [ngModelOptions]="{standalone: true}"
                          [indeterminate]="isIndeterminate()"
                          [checked]="isChecked()" 
                          (click)="$event.stopPropagation()"
                          (change)="toggleAllSelection($event)">{{text}}</mat-checkbox>
      </div>
      <mat-option *ngFor="let item of data" [value]="item[idField]">
        {{item[fieldName]}}
      </mat-option>
    </mat-select>
    </mat-form-field>
    </form>

And it looks like this on the rendered page

When I go and add the following line to my parent style sheet all mat-form-field-underlines are gone which is not what I want. If I go and remove the mat-form-field in my custom ponent I only get one line but then the alignment of the mat-form-field-underline is off with the other ponents on page. So I need to find a way to only target the 2nd underline to be able to remove.

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

Here is a stackblitz sample which demonstrate this issue of the 2nd underline StackBlitz Sample

Here is the code when i inspect it and it seems that for some reason there is a mat-form-field inside a mat-form-field. Not sure why ?

<mat-form-field _ngcontent-jtb-c709="" class="mat-form-field col-md-6 ng-tns-c393-17 mat-primary mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder"><div class="mat-form-field-wrapper ng-tns-c393-17"><div class="mat-form-field-flex ng-tns-c393-17"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "0"
}--><div class="mat-form-field-infix ng-tns-c393-17"><app-mat-select-all _ngcontent-jtb-c709="" formcontrolname="tractList" fieldname="name" labeltext="Tract List" idfield="guid" _nghost-jtb-c804="" ng-reflect-field-name="name" ng-reflect-label-text="Tract List" ng-reflect-id-field="guid" ng-reflect-name="tractList" ng-reflect-form-control-name="tractList" class="ng-tns-c393-17 ng-untouched ng-pristine ng-valid" ng-reflect-multiselect="true" ng-reflect-data="[object Object],[object Object"><form _ngcontent-jtb-c804="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-valid"><mat-form-field _ngcontent-jtb-c804="" class="mat-form-field ng-tns-c393-18 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid"><div class="mat-form-field-wrapper ng-tns-c393-18"><div class="mat-form-field-flex ng-tns-c393-18"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "0"
}--><div class="mat-form-field-infix ng-tns-c393-18"><mat-select _ngcontent-jtb-c804="" role="bobox" aria-autoplete="none" aria-haspopup="true" class="mat-select ng-tns-c500-19 ng-tns-c393-18 ng-star-inserted mat-select-empty mat-select-multiple ng-untouched ng-pristine ng-valid" ng-reflect-multiple="true" ng-reflect-form="[object Object]" aria-labelledby="mat-form-field-label-19 mat-select-value-15" id="mat-select-14" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c500-19"><div class="mat-select-value ng-tns-c500-19" ng-reflect-ng-switch="true" id="mat-select-value-15"><span class="mat-select-placeholder mat-select-min-line ng-tns-c500-19 ng-star-inserted"></span><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--></div><div class="mat-select-arrow-wrapper ng-tns-c500-19"><div class="mat-select-arrow ng-tns-c500-19"></div></div></div><!--bindings={
  "ng-reflect-offset-y": "0"
}--></mat-select><span class="mat-form-field-label-wrapper ng-tns-c393-18"><label class="mat-form-field-label ng-tns-c393-18 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-19" ng-reflect-ng-switch="true" for="mat-select-14" aria-owns="mat-select-14"><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--><mat-label _ngcontent-jtb-c804="" class="ng-tns-c393-18 ng-star-inserted">Tract List</mat-label><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></label><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span></div><!--bindings={
  "ng-reflect-ng-if": "0"
}--></div><div class="mat-form-field-underline ng-tns-c393-18 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-18"></span></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="mat-form-field-subscript-wrapper ng-tns-c393-18" ng-reflect-ng-switch="hint"><!--bindings={
  "ng-reflect-ng-switch-case": "error"
}--><div class="mat-form-field-hint-wrapper ng-tns-c393-18 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
  "ng-reflect-ng-if": ""
}--><div class="mat-form-field-hint-spacer ng-tns-c393-18"></div></div><!--bindings={
  "ng-reflect-ng-switch-case": "hint"
}--></div></div></mat-form-field></form></app-mat-select-all><span class="mat-form-field-label-wrapper ng-tns-c393-17"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span></div><!--bindings={
  "ng-reflect-ng-if": "0"
}--></div><div class="mat-form-field-underline ng-tns-c393-17 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-17"></span></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="mat-form-field-subscript-wrapper ng-tns-c393-17" ng-reflect-ng-switch="hint"><!--bindings={
  "ng-reflect-ng-switch-case": "error"
}--><div class="mat-form-field-hint-wrapper ng-tns-c393-17 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
  "ng-reflect-ng-if": ""
}--><div class="mat-form-field-hint-spacer ng-tns-c393-17"></div></div><!--bindings={
  "ng-reflect-ng-switch-case": "hint"
}--></div></div></mat-form-field>

• javascript
• css
• angular
• typescript
• angular-material

Share Improve this question Follow edited Jul 25, 2022 at 5:01 marc_s 755k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Apr 21, 2022 at 19:01 MisterniceGuyMisterniceGuy 1,79622 gold badges2424 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

When you do this:

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

That would apply to all Material Components that have this class. What you should do is add custom class to the ponent inside HTML and then reference it like this inside SCSS file:

<mat-form-field class="custom-class">
  ...
</mat-form-field>

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

Now, only that ponent will be affected by ::ng-deep override.

Working example

In angular-material 15 and above with MDC-based ponents, the below code hides the extra underline for mat-select, without affecting other form field ponents:

mat-form-field:has(mat-select) div[matformfieldlineripple] {
    display: none;
}

Here, you hide the ripple divs within only those mat-form-fields which have mat-select inside.

Based on https://stackoverflow./a/75800578/4840987

本文标签： javascriptHow to avoid extra matformfieldunderline in Angular materialStack Overflow