mat-form-field必须包含MatFormFieldControl

我们正试图在我们公司建立我们自己的形式场组件。我们试图这样包装材料设计的组件:

字段:

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

文本框:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

用法:

<textbox value="test" hint="my hint"></textbox>

结果大致如下:

<textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
  <field>
    <mat-form-field class="mat-input-container mat-form-field">
      <div class="mat-input-wrapper mat-form-field-wrapper">
        <div class="mat-input-flex mat-form-field-flex">
          <div class="mat-input-infix mat-form-field-infix">
            <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">
            <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
          </div>
        </div>
        <div class="mat-input-underline mat-form-field-underline">
          <span class="mat-input-ripple mat-form-field-ripple"></span>
        </div>
        <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
      </div>
    </mat-form-field>
  </field>
</textbox>

但是我在控制台得到“mat-form-field必须包含MatFormFieldControl”。我猜这与mat-form-field不直接包含matinput字段有关。但它包含了它，只是在ng-content投影中。

以下是闪电战: https://stackblitz.com/edit/angular-xpvwzf

当前回答

我忘了在输入标签中添加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>

2022-12-11 14:56:18

其他回答

在组件中使用提供者。ts文件

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})

2020-06-04 15:46:38

我不小心从输入字段中删除了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>

2019-05-21 14:05:20

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

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

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

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

2021-05-15 18:54:37

只需添加matInput指令到每个输入，matselect和mat-chip-list

2021-07-09 10:51:46

我得到了同样的问题，由于评论元素如下。

<mat-form-field>
    <mat-label>Database</mat-label>
    <!-- <mat-select>
        <mat-option *ngFor="let q of queries" [value]="q.id">
            {{q.name}}
        </mat-option>
    </mat-select>  -->
</mat-form-field>

表单字段应该有元素!(例如输入，文本区域，选择等)

2020-02-11 08:57:50

mat-form-field必须包含MatFormFieldControl

推荐文章

最新文章

标签