Question

我收到错误ERROR mat-form-field must contain a MatFormFieldControl，这意味着我需要在最近的父模块中导入MatFormFieldModule。但是我已经这样做了，所以我不明白问题出在哪里...

模板

<form [formGroup]="form" (ngSubmit)="handleSubmit()">
    <mat-form-field>
        <input matInput placeholder="Name" formControlName="name" />
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Active Description"
            formControlName="activeDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Inactive Description"
            formControlName="inactiveDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-checkbox formControlName="active">Active</mat-checkbox>
    </mat-form-field>
</form>

模块

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { PaymentConfigSelectorComponent } from './payment-config-selector/payment-config-selector.component';
import { PaymentMethodComponent } from './payment-method/payment-method.component';
import { PaymentMethodsComponent } from './payment-methods/payment-methods.component';
import { PaymentRoutingModule } from './payment-routing.module';
import { PaymentEffects } from './payment.effects';
import { paymentReducer } from './payment.reducer';
import { PaymentSmartComponent } from './smart/payment-smart.component';

@NgModule({
  declarations: [PaymentSmartComponent, PaymentMethodsComponent, PaymentConfigSelectorComponent, PaymentMethodComponent ],
  imports: [
    CommonModule,
    PaymentRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    EffectsModule.forFeature([PaymentEffects]),
    StoreModule.forFeature(
      'payment',
      paymentReducer,
    ),
    MatFormFieldModule, MatInputModule, MatSelectModule, MatCheckboxModule, MatButtonModule,
  ],
  providers: [
  ],
})
export class PaymentModule { }

Answer 1

实际上，该错误并不表示模块导入有问题，而是您在使用mat-form-field时没有有效的控件。

问题在这里：

<mat-form-field>
    <mat-checkbox formControlName="active">Active</mat-checkbox>
</mat-form-field>

MatChebox不能包含在mat-form-field中。 Juste取出容器

Answer 2

对我来说，我使用的是材料，但需要添加 import { MatInputModule } from '@angular/material/input';

添加到我的模块中，然后添加 MatInputModule 到我的imports数组中。

确保在您的父模块中导入了所有需要使用的东西。

Answer 3

我通过添加一个隐藏的输入字段解决了这个问题。

int commonCharacterCount(String s1, String s2) {
    
    String[] S1Array= s1.split("");
    String[] S2Array= s2.split("");
    
    int count=0;
 
    for(int x=0;x<S1Array.length;x++){
 
        // S2ArrayCopy is to check if the S2Array's array element is already been checked using 1 and 0, if 1 then count will not be updated as already checked
            int[] S2ArrayCopy= new int[S2Array.length ] ;
            Arrays.fill(S2ArrayCopy,0);
 
        for(int i=0;i<S2Array.length;i++){
          
              
                             
            if(S1Array[x] == S2Array[i] && S2ArrayCopy[i] != 1 ){
                              

                 count++;
                
               S2ArrayCopy[i]=1;
                
                break;
            }
            
            
            
        }
        
        
    }

Answer 4

使用带有“mat-form-field”类的“div”对我来说很有效：

<div class="mat-form-field">
    <mat-checkbox formControlName="didAcceptTerms">
        <span
        [innerHTML]="'booking.submit.didAcceptTerms.lbl'|translate"></span>
    </mat-checkbox>
    <mat-error *ngIf="f.didAcceptTerms.errors">
        {{ 'booking.submit.didAcceptTerms.error' | translate }}
    </mat-error>    
</div>

Answer 5

我必须这样做才能让它工作：-

<mat-form-field>
  <input hidden=true matInput> // this gets rid of the error, while the form still uses the input received in the
  mat-checkbox
  <mat-checkbox matInput formControlName="active">Active</mat-checkbox>
</mat-form-field>

mat-form-field必须包含MatFormFieldControl并且已经导入

5 个答案: