web-dev-qa-db-fra.com

Champ angulaire à 4 formes avec sélection de tapis

J'ai donc des problèmes avec mat-select avec mat-form-field. Utiliser mat-form-field avec mat-input n'est pas un problème, et je suis à peu près sûr que mes importations sont également correctes. Cependant, je reçois le message d'erreur suivant lorsque j'essaie d'utiliser mat-select:

Erreur: md-form-field doit contenir un MdFormFieldControl. Avez-vous oublié d'ajouter mdInput au fichier natif ...

Mon code HTML est le suivant:

<mat-form-field class="full-width">
  <mat-select name="sampleType" formControlName="sampleTypeCtrl" 
   placeholder="Sample Type" required>
     <mat-option *ngFor="let sample of samples" [value]="sample.value">
       {{ sample.viewValue }}
     </mat-option>
  </mat-select>
</mat-form-field>

Mon module de vue contenant ce composant et importé dans mon fichier app.module.ts principal est le suivant:

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

@NgModule({
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    ...
  ],
})
export class ViewModule {}

Mon fichier principal app.module.ts comprend les importations ViewModule et NoConflictStyleCompatibilityMode et se présente comme suit:

...
import { ViewModule } from './view/view.module';
import { NoConflictStyleCompatibilityMode } from '@angular/material';
...
@NgModule({
  ...
  imports: [
    ViewModule,
    NoConflictStyleCompatibilityMode
  ],
  ...
})
export class AppModule { }

Lorsque je supprime le champ de formulaire mat autour du tapis de sélection, l'erreur disparaît, mais il y a des incohérences dans la façon dont la saisie de tapis (à l'aide du champ de formulaire mat) et la sélection de tapis sont stylisées. J'importe les MatSelectModule et MatFormFieldModule, mais j'obtiens cette erreur. J'ai également mis à jour mon npm pour le matériau angulaire 2 afin qu'il comporte les informations les plus récentes et les meilleures, mais toujours rien. Qu'est-ce que je néglige? J'ai vu ce type de problème traité dans les stackoverflows récents, mais chaque solution que j'ai déjà essayée sans succès.

mat-select ne fonctionne pas correctement
mat-form-field doit contenir un MatFormFieldControl

angularangular-material2angular4-forms
6
John Stafford

Je faisais face à un problème similaire et de ce numéro sur github, j’ai réalisé que ngIf ne doit pas être sur mat-select.

Cela peut aider quelqu'un:

Assurez-vous de ne pas avoir un ngIf sur votre tapis.

2
skm

Essayez d'ajouter simplement l'attribut matInput à votre mat-select imbriqué (comme le suggère le message d'erreur):

<mat-form-field>
    <mat-select matInput name="mySelect">
        <mat-option>
            ...
        </mat-option>
    </mat-select>
</mat-form-field>

Cette construction fonctionne pour moi.

UPD .: Exemple de plnkr rapide https://plnkr.co/edit/9Yz6xkcVMCMpRhP3Qse9

1
grumbler_chester

vient de mettre à jour mon angulaire à la dernière version, qui était 5 dans ce cas et il a résolu le problème

0
John Stafford