如何删除空间底部垫形式字段

Question

我将 angular 7 与角材料一起使用，并且我想移除空间底部，如您所见。我尝试了很多方法但没有成功。

Answer 1

对于 2023 年阅读本文的任何人：Angular 15 现在向表单字段添加了一个新属性：subscriptSizing。

如果添加subscriptSizing="dynamic"到mat-form-field，它将删除空格，直到实际需要显示错误或提示，然后才展开。这会导致布局发生变化，但根据您的使用情况，这可能是比之前建议的手动添加边距（并且在版本 14 之前是必需的）更好的选择。

有关参考，请参阅https://material.angular.io/components/form-field/api#SubscriptSizing

您还可以通过 MAT_FORM_FIELD_DEFAULT_OPTIONS 注入令牌将其全局指定为默认值；请参阅https://material.angular.io/components/form-field/api#MatFormFieldDefaultOptions

// in main.ts (Angular 15+)
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        subscriptSizing: 'dynamic'
      }
    }
  ],
});

Answer 2

你可以在你的css中添加这个

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

注意：当您移除空间时，您无法放置<mat-hint>hint</mat-hint>或<mat-error>error</mat-error>正确放置。错误和提示进入表单域。

不使用::ng-deep（对于 Angular 8）

关闭您在其中更改填充的组件的封装。

你可以这样做

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

将要设置样式的组件包装在自定义类中。所以它不会影响任何其他mat-form-field组件。现在让我们用my-form-fieldclass包装它

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

<mat-form-field class="my-form-field>
  <input matInput placeholder="Input">
</mat-form-field>

您可以在全局样式表中添加这些 css，而无需关闭视图封装。但更优雅的方法是上面的一种

Answer 3

请尝试以下操作：

<mat-form-field style="margin-bottom: -1.25em">

（您可以在此处关注有关此额外底部空间的讨论：https : //github.com/angular/components/issues/7975）

Answer 4

在 angular 9 中，我只能通过将以下内容添加到 component.scss 中来消除间隙（其他答案在我的情况下不起作用）：

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

另外，我使用了外观="outline"，对于其他外观，可能需要更改其他 css 类和属性，因为它可能有其他元素。

Answer 5

我的解决方案是使用一个额外的类。

HTML：

<mat-form-field class="no-padding">
    <input type="number" matInput placeholder="Speed" [ngModel]="speed"
           (ngModelChange)="onSpeedChange('speed', $event)"/>
  </mat-form-field>

社会保障体系：

.no-padding {
  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}

不幸的是， !important 关键字是必要的，否则它只会引入默认值。

Answer 6

在 Angular Material 15 中，您可以使用 subscriptSizing="dynamic".

<mat-form-field class="w-full" appearance="outline" subscriptSizing="dynamic">
          
</mat-form-filed>