angular - hammerjs - mat-form-field debe contener un MatFormFieldControl

angular material tutorial (15)

Solución 1

importar MatInputModule dentro de app.module.ts

import { MatInputModule } from ''@angular/material''; @NgModule({ imports: [ // ....... MatInputModule // ....... ] }) export class AppModule { }

Solución 2

Verifique la ortografía de matInput , asegúrese de que matInput mayúsculas y minúsculas

<input matInput type="text" />

Estamos tratando de construir nuestros propios componentes de campo de formulario en nuestra empresa. Estamos tratando de envolver los componentes del diseño de materiales de esta manera:

campo:

<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>

caja de texto:

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

Uso:

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

Esto da como resultado aproximadamente esto:

Pero estamos obteniendo "mat-form-field debe contener un MatFormFieldControl" en la consola. Supongo que esto tiene que ver con mat-form-field que no contiene directamente un matInput-field. Pero lo está conteniendo, solo está dentro de la proyección de contenido ng.

Aquí hay un bombardeo: https://stackblitz.com/edit/angular-xpvwzf

Accidentalmente eliminé la directiva matInput del campo de entrada que causó el mismo error.

p.ej.

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

código fijo

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

Citando de la documentación oficial here :

Error: mat-form-field debe contener un MatFormFieldControl

Este error se produce cuando no ha agregado un control de campo de formulario a su campo de formulario. Si su campo de formulario contiene un elemento o elemento nativo, asegúrese de haber agregado la directiva matInput y haber importado MatInputModule. Otros componentes que pueden actuar como control de campo de formulario incluyen, y cualquier control de campo de formulario personalizado que haya creado.

Desafortunadamente, la proyección de contenido en mat-form-field aún no es compatible. github.com/angular/material2/issues/9411 el siguiente github.com/angular/material2/issues/9411 para obtener las últimas noticias al respecto.

Por ahora, la única solución para usted es colocar su contenido directamente en el componente mat-form-field o implementar una clase MatFormFieldControl creando así un componente de campo de formulario personalizado.

Desafortunadamente, no puedo comentar algunas respuestas ya buenas, ya que aún no tengo los puntos SO, sin embargo, hay 3 módulos clave que necesitará para asegurarse de que está importando al módulo principal de su componente, aparte de tienes que importar directamente a tu componente. Quería compartirlos brevemente y resaltar lo que hacen.

MatInputModule
MatFormFieldModule
ReactiveFormsModule

Los dos primeros son para material angular. Mucha gente nueva en Angular Material se encontrará instintivamente con uno de estos y no se dará cuenta de que construir una forma requiere ambos.

Entonces, ¿cuál es la diferencia entre ellos?

MatFormFieldModule abarca todos los diferentes tipos de campos de formulario que Angular Material tiene disponible. Este es más un módulo de alto nivel para campos de formulario en general, mientras que MatInputModule es específicamente para tipos de campo de ''entrada'', en lugar de cuadros de selección, botones de opción, etc.

El tercer elemento de la lista anterior es el Módulo de formularios reactivos de Angular. El módulo de formularios reactivos es responsable de una tonelada de amor angular bajo el capó. Si va a trabajar con Angular, le recomiendo que pase un tiempo leyendo Angular Docs. Tienen todas tus respuestas. La creación de aplicaciones rara vez NO involucra formularios, y la mayoría de las veces, su aplicación involucrará formularios reactivos. Por esa razón, tómese el tiempo de leer estas dos páginas.

Documentos angulares: formas reactivas

Documentos angulares: módulo de formularios reactivos

El primer documento ''Formas reactivas'' será su arma más poderosa cuando comience, y el segundo documento será su arma más poderosa a medida que avance en aplicaciones más avanzadas de Formas reactivas angulares.

Recuerde, estos deben importarse directamente en el módulo de su componente, no en el componente en el que los está utilizando. Si no recuerdo mal, en Angular 2, importamos el conjunto completo de módulos de material angular en nuestro módulo de aplicación principal, y luego importamos qué Necesitábamos en cada uno de nuestros componentes directamente. El método actual es mucho más eficiente IMO porque estamos garantizados para importar el conjunto completo de módulos de material angular si solo usamos algunos de ellos.

Espero que esto proporcione un poco más de información sobre la creación de formas con material angular.

En mi caso cambié esto:

<mat-form-field> <input type="email" placeholder="email" [(ngModel)]="data.email"> </mat-form-field>

a esto:

<mat-form-field> <input matInput type="email" placeholder="email" [(ngModel)]="data.email"> </mat-form-field>

Agregar la directiva matInput a la etiqueta de entrada fue lo que solucionó este error para mí.

En mi caso, uno de mis paréntesis de cierre para "onChanges ()" se perdió en el elemento de entrada y, por lo tanto, el elemento de entrada aparentemente no se representaba en absoluto:

<input mat-menu-item matInput type="text" [formControl]="myFormControl" (ngModelChange)="onChanged()>

Esto también puede suceder si tiene una entrada adecuada dentro de un campo de formulario mat , pero tiene un ngIf . P.ej:

<mat-form-field> <mat-chip-list *ngIf="!_dataLoading">  </mat-chip-list> </mat-form-field>

En mi caso, se supone que " mat-chip-list " "aparece" solo después de que se cargan sus datos. Sin embargo, la validación se realiza y mat-form-field queja con

mat-form-field debe contener un MatFormFieldControl

Para solucionarlo, el control debe estar allí, así que he usado [hidden] :

<mat-form-field> <mat-chip-list [hidden]="_dataLoading">  </mat-chip-list> </mat-form-field>

Mosta propone una solución alternativa: move * ngIf para mat-form-field :

<mat-form-field *ngIf="!_dataLoading"> <mat-chip-list >  </mat-chip-list> </mat-form-field>

MatRadioModule no funcionará dentro de MatFormField. Los docs dicen

Este error se produce cuando no ha agregado un control de campo de formulario a su campo de formulario. Si su campo de formulario contiene un elemento o elemento nativo, asegúrese de haber agregado la directiva matInput y haber importado MatInputModule. Otros componentes que pueden actuar como control de campo de formulario incluyen <mat-select>, <mat-chip-list> y cualquier control de campo de formulario personalizado que haya creado.

No estoy seguro de si podría ser así de simple, pero tuve el mismo problema, cambiar "mat-input" a "matInput" en el campo de entrada resolvió el problema. En su caso, veo "matinput" y está causando que mi aplicación arroje el mismo error.

<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">

"matinput"

"matInput"

Puede intentar seguir esta guide e implementar / proporcionar su propio MatFormFieldControl

Si alguien se atascó con este error después de intentar anidar un <mat-checkbox> , ¡anímate! No funciona dentro de una etiqueta <mat-form-field> .

Si todas las respuestas de configuración / estructura de código principal anteriores no resuelven su problema, aquí hay una cosa más que debe verificar: asegúrese de no haber invalidado de alguna manera su etiqueta <input> .

Por ejemplo, recibí el mismo mat-form-field must contain a MatFormFieldControl mensaje de error mat-form-field must contain a MatFormFieldControl después de colocar accidentalmente un atributo required después de una barra oblicua de cierre automático, que efectivamente invalidó mi <input/> . En otras palabras, hice esto (ver el final de los atributos de la etiqueta de entrada):

mal :

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls[''linkUrl'']" /required>

derecha :

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls[''linkUrl'']" required/>

Si comete ese error u otra cosa para invalidar su <input> , entonces podría obtener que el mat-form-field must contain a MatFormFieldControl error de mat-form-field must contain a MatFormFieldControl . De todos modos, esto es solo una cosa más a tener en cuenta mientras estás depurando.

También tuve este problema, y tengo el elemento <mat-select> en mi plantilla, cuando importo el MatSelectModule en el Módulo, funciona, no hace ciencia, pero espero que pueda ayudarlo.

import { MatSelectModule } from ''@angular/material/select''; imports: [ BrowserModule, BrowserAnimationsModule, MatSidenavModule, MatButtonModule, MatIconModule, MatToolbarModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatCardModule, MatSelectModule ], <div class="example-container"> <mat-form-field> <input matInput placeholder="Input"> </mat-form-field> <mat-form-field> <textarea matInput placeholder="Textarea"></textarea> </mat-form-field> <mat-form-field> <mat-select placeholder="Select"> <mat-option value="option">Option</mat-option> </mat-select> </mat-form-field> </div>

Tuve este problema MatFormFieldModule en mi módulo principal, pero olvidé agregar MatInputModule a la matriz de imports , así:

import { MatFormFieldModule, MatInputModule } from ''@angular/material''; @NgModule({ imports: [ MatFormFieldModule, MatInputModule ] }) export class AppModule { }

Espero eso ayude.

Más información here .