部分解决方案是将材料表单字段包装在自定义组件中，并在其上实现ControlValueAccessor接口。除了内容投影之外，效果几乎是一样的。

参见Stackblitz的完整示例。

我在CustomInputComponent中使用了FormControl(响应式表单)，但如果你需要更复杂的表单元素，FormGroup或FormArray也应该工作。

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="outline" floatLabel="always" color="primary">
    <mat-label>First name</mat-label>
    <input matInput placeholder="First name" formControlName="firstName" required>
    <mat-hint>Fill in first name.</mat-hint>
    <mat-error *ngIf="firstNameControl.invalid && (firstNameControl.dirty || firstNameControl.touched)">
      <span *ngIf="firstNameControl.hasError('required')">
        You must fill in the first name.
      </span>
    </mat-error>
  </mat-form-field>

  <custom-input
    formControlName="lastName"
    [errorMessages]="errorMessagesForCustomInput"
    [hint]="'Fill in last name.'"
    [label]="'Last name'"
    [isRequired]="true"
    [placeholder]="'Last name'"
    [validators]="validatorsForCustomInput">
  </custom-input>

  <button mat-flat-button
    color="primary"
    type="submit"
    [disabled]="form.invalid || form.pending">
    Submit
  </button>

</form>

custom-input.component.html

<mat-form-field appearance="outline" floatLabel="always" color="primary">
  <mat-label>{{ label }}</mat-label>

  <input
    matInput
    [placeholder]="placeholder"
    [required]="isRequired"
    [formControl]="customControl"
    (blur)="onTouched()"
    (input)="onChange($event.target.value)">
  <mat-hint>{{ hint }}</mat-hint>

  <mat-error *ngIf="customControl.invalid && (customControl.dirty || customControl.touched)">
    <ng-container *ngFor="let error of errorMessages">
    <span *ngFor="let item of error | keyvalue">
      <span *ngIf="customControl.hasError(item.key)">
        {{ item.value }}
      </span>
    </span>
    </ng-container>
  </mat-error>
</mat-form-field>

我也有这个问题，我有<mat-select>元素在我的模板，当我导入MatSelectModule到模块，它的工作，它没有意义，但我仍然希望它能帮助你。

import { MatSelectModule } from '@angular/material/select';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
],

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>
    
    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>
    
    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

我有这个问题。我在我的主模块中导入了MatFormFieldModule，但忘记将MatInputModule添加到imports数组中，如下所示:

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

更多信息请点击这里。

我忘了在输入标签中添加matInput属性

<mat-form-field appearance="outline">
    <mat-label>Mobile</mat-label>
    <input type="text"
           [(ngModel)]="parent.mobile"
           formControlName="mobile"
           id="mobile"
           name="mobile">
  </mat-form-field>

添加后:

<mat-label>Mobile</mat-label>
<input type="text"
       matInput
       [(ngModel)]="parent.mobile"
       formControlName="mobile"
       id="mobile"
       name="mobile">   </mat-form-field>

我在一次Karma测试中遇到了问题

正如大多数答案已经指出的那样，缺失的模块会导致问题，它们也必须重新导入到Karma TestBed中。此外，似乎我们还需要导入BrowserAnimationsModule来使一切正常工作。

在我下面的代码中，我注释了一些可能对你没用的模块，但其他4个导入肯定会有帮助!

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EventFormComponent ],
      imports: [
        # HttpClientTestingModule,
        # RouterTestingModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        BrowserAnimationsModule,
        # TranslateModule.forRoot(),
      ],
    })
    .compileComponents();
  }));

在我的例子中，它是TranslocoService服务，它可能会打乱init之后的初始化。

我的代码是这样的:

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        *transloco="let t"
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        placeholder="{{t('customer.management.customers.search.customer.name')}}">
</mat-form-field>

我把它改成了这样。

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        [placeholder]="searchBarPlaceHolder">
</mat-form-field>

占位符值来自组件中的一个字段。 经过这种修改，错误就消失了。如果你正在使用transloco，你可以试试这个。