web-dev-qa-db-fra.com

Angular Material error when mat-checkbox is imports

J'ai des problèmes avec Angular Material, j'ai essayé beaucoup de solutions mais aucune ne fonctionne. C'est ce que j'essaie de faire:

J'utilise Angular Material with Reactive Forms pour créer un register formulaire, tout allait bien jusqu'à ce que j'ajoute un mat-checkbox composant. Voici le error que j'obtiens:

ERREUR Erreur: mat-form-field doit contenir un MatFormFieldControl.

Et voici mon code:

HTML:

<mat-form-field>
   <mat-checkbox formControlName="check">
      Check me!
   </mat-checkbox>
</mat-form-field>

COMPOSANT:

this.registerForm = this.formBuilder.group({
    name: ['', Validators.required ],
    email: ['', Validators.required],
    check: ['', Validators.required ]
});

MODULE:

import { ReactiveFormsModule } from '@angular/forms';
import { RegisterFormComponent } from './register-form.component';
import { MatCheckboxModule } from '@angular/material';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
 imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatCheckboxModule,
    BrowserAnimationsModule
 ],
 declarations: [
    RegisterFormComponent
 ]
})

export class RegisterFormModule { }

J'ai importé les modules pour que Angular Material fonctionne bien, j'ai implémenté le nom du contrôle de formulaire et j'ai toujours le même error. J'ai essayé d'inclure le mat-checkbox dans mon html sans le conteneur mat-form-field et cela fonctionne parfaitement sans erreur, mais j'ai vraiment besoin d'utiliser le champ de formulaire car je souhaitez ajouter des composants d'erreur de mat pour afficher les messages de validation.

Quelqu'un sait-il ce qui me manque?

angularangular-materialangular-reactive-forms
15
Daniela Cortes

L'erreur signifie que le champ de formulaire ne peut pas trouver une entrée de matériau compatible à l'intérieur de celui-ci.

Ne pas utiliser <mat-checkbox> à l'intérieur <mat-form-field>.

Les composants Angular Material sont conçus pour fonctionner à l'intérieur d'un <mat-form-field>:

  • <input matInput> & <textarea matInput>

  • <mat-select>

  • <mat-chip-list>

Source: Documents officiels

20
kvetis

Dans ce cas, pourquoi le site matériel angular montre cet exemple dans le même lien avec mat-radio-group utilisé avec formControlName.

<form class="example-container" [formGroup]="options">
    <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
    <div>
      <label>Float label: </label>`enter code here`
      <mat-radio-group formControlName="floatLabel">
        <mat-radio-button value="auto">Auto</mat-radio-button>
        <mat-radio-button value="always">Always</mat-radio-button>
        <mat-radio-button value="never">Never</mat-radio-button>
      </mat-radio-group>
    </div>
  </form>
0
Learning