Angular 4 mat-form-field with mat-select
Solution 1
I was facing similar issue and from this issue on github I realized that ngIf must not be on mat-select.
This may help some one:
Make sure you don't have an ngIf on your mat-select.
Solution 2
Try to just add matInput
attribute to your nested mat-select
(as error message suggests):
<mat-form-field>
<mat-select matInput name="mySelect">
<mat-option>
...
</mat-option>
</mat-select>
</mat-form-field>
This construction works for me.
UPD.: Quick plnkr example https://plnkr.co/edit/9Yz6xkcVMCMpRhP3Qse9
![John Stafford](https://i.stack.imgur.com/vnP1d.jpg?s=256&g=1)
John Stafford
Hi, my name is John Stafford. I am currently working on Java, Spring Boot, OAuth2, JPA, Hibernate, and Angular projects. Most of my questions center around this right now. In addition, I also find myself learning quite a bit about HTML5, CSS3, and JavaScript, and JavaScript animations (Greensock) too. I appreciate any help that you can offer me . I hope to one day return the favor for other users as well. Thank you for your time in visiting my profile and questions.
Updated on June 21, 2020Comments
-
John Stafford about 4 years
So, I am having problems using mat-select with mat-form-field . Using mat-form-field with mat-input is not a problem, and I am fairly sure my imports are correct as well, yet I receive the following error when trying to use mat-select:
Error: md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native...
My HTML code is the following:
<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>
My view module that contains this component and is imported into my main app.module.ts file is the following:
... import { MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material'; ... @NgModule({ imports: [ ... MatInputModule, MatFormFieldModule, MatSelectModule, ... ], }) export class ViewModule {}
My main app.module.ts file includes both the ViewModule and the NoConflictStyleCompatibilityMode imports and looks like the following:
... import { ViewModule } from './view/view.module'; import { NoConflictStyleCompatibilityMode } from '@angular/material'; ... @NgModule({ ... imports: [ ViewModule, NoConflictStyleCompatibilityMode ], ... }) export class AppModule { }
When I remove the mat-form-field from around the mat-select, the error goes away, but I get inconsistencies with how mat-input (using mat-form-field) and mat-select are styled. I am importing both the MatSelectModule and MatFormFieldModule, yet I get this error. I have also updated my npm for angular material 2 so that it has the latest and greatest, but still nothing. What am I overlooking? I have seen this type of problem addressed in recent stackoverflows, but each solution I have already tried without luck.
mat-select Not Working Properly
mat-form-field must contain a MatFormFieldControl -
John Stafford over 6 yearsthank you for your response. When I add the 'matInput' , I still get the following error: Error: md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native …
-
John Stafford over 6 yearsAlso, why is it still complaining about stuff using the 'md' prefix too? I have switched everything over to use the 'mat' prefix. This is confusing.
-
GreenTeaCake over 6 yearsCan you please check if your module imports MatInputModule, MatSelectModule and MatFormFieldModule? Can you provide plnkr example of your code?
-
GreenTeaCake over 6 yearsThere is also a thing that you need to import material theme in order to use components. github.com/angular/material2/issues/6948 Did you use it?
-
John Stafford over 6 yearsyes, I imported a theme already and have imported MatInputModule, MatSelectModule and MatFormFieldModule in my module. I will try to get a plunker done tonight.