请注意 当我们在提交按钮周围使用“mat-form-field”标签时，有时会出现错误:

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

所以请不要在提交按钮周围使用这个标签

在我的例子中，它是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，你可以试试这个。

我不小心从输入字段中删除了matInput指令，这导致了同样的错误。

eg.

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

固定的代码

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

我不确定它是否可以这么简单，但我有同样的问题，在输入字段中将“mat-input”更改为“matInput”解决了这个问题。在你的情况下，我看到“matinput”，它导致我的应用程序抛出相同的错误。

<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">

“垫输入”

“垫输入”

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

不要忘记在前面添加< table> </table>

 <mat-form-field>
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Helium" #input>
      </mat-form-field>

不要忘记在最后添加< table> </table>

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
   No data matching the filter "{{input.value}}"
</td>
</tr>

部分解决方案是将材料表单字段包装在自定义组件中，并在其上实现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>