Angular 18独立组件如何设置subscriptSizing为dynamic？

核心问题解决：正确导入配置Token #

你遇到的MAT_FORM_FIELD_DEFAULT_OPTIONS无法识别的问题，是因为该配置Token并非从MatFormFieldModule导出，需要单独从@angular/material/form-field包中导入。

全局配置方案（app.config.ts） #

修改app.config.ts，补充正确的导入语句并完成provider配置：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideHttpClient } from '@angular/common/http';
// 关键：导入MAT_FORM_FIELD_DEFAULT_OPTIONS
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    provideHttpClient(),
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: { subscriptSizing: 'dynamic' }
    }
  ]
};

组件级单独配置（可选） #

如果不需要全局生效，可在单个独立组件的providers数组中单独配置：

import { Component } from '@angular/core';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-target-form',
  standalone: true,
  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule],
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: { subscriptSizing: 'dynamic' }
    }
  ],
  templateUrl: './target-form.component.html',
  styleUrls: ['./target-form.component.css']
})
export class TargetFormComponent {
  // 表单逻辑代码
}

验证配置生效 #

配置完成后，mat-form-field会根据是否存在错误提示、占位符等内容动态调整底部间距，从而减少不必要的空白区域。

内容的提问来源于stack exchange，提问作者pvitt