mat-form-field must contain a matformfieldcontrol.. I have a child component that recieves an Input object and I should save what's written in the input field onto a property of this object. mat-form-field must contain a matformfieldcontrol.

 
<i> I have a child component that recieves an Input object and I should save what's written in the input field onto a property of this object</i>mat-form-field must contain a matformfieldcontrol.  0

If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the. Angular material Date validation not happening as expected. ts file. An optional name for the control type that can be used to distinguish mat-form-field elements based on their control type. 1313. ERROR Error: mat-form-field must contain a MatFormFieldControl. 1. 0. Implementing MatFormFieldControl. 4. Th. <mat-form-field> <mat-label> {{column}} </mat-label> <input type="text" matInput [(ngModel)]="element. The. It's generally helpfully to find the smallest version of your problem that's still broken. overview api examples. but you provide your component as MatFormFieldControl and implement. Documentation Feedback Usecase: in my form, i need to replace textarea (inside mat-form-field) with a code editor. 1 Answer. I have simple Angular Material form with a text input. . ERROR Error: mat-form-field must contain a MatFormFieldControl. validation on dropdownlist. I would like to outline them with a color like purple or red. EDIT: Please bear in mind that the example above will create a new instance of SearchModule each time, which may not be desirable. I have integrated the material UI in my angular project using this command ng add @angular/material and I have imported the all necessary components on app. When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled. <mat-form-field> <input matInput type="text" [placeholder]="placeholder" [ (ngModel)]="value" /> <mat-error>This field is. This module supports ReactiveForms but it doesn't work in a MatFormFieldControl: Error: mat-form-field must contain a MatFormFieldControl. 1. Here are some steps you can follow to fix the error:But I'm getting "mat-form-field must contain a MatFormFieldControl" in the console. module. Reload to refresh your session. formControlName for mat-list gives 'mat-form-field must contain a MatFormFieldControl' 0. 3. We recommend a specificity of at. I am using a FormBuilder to generate my FormGroup. edukng623 opened this issue on May 23, 2018 · 4 comments. Actually when I used the step form like in doc. The only change I made to the working code below is to wrap the input field in and add the matInput attribute to the input field. Provide details and share your research! But avoid. mat-form-field must contain a matformfieldcontrol with mat date range input. Actually the error doesn't mean a module import problem, but that you're using the mat-form-field without a valid control. Angular Material form issue: angular mat-form-field must contain MatFormFieldControl. form-field-density (-5); in my scss main file, it doesn't work, i try to define my theme with density, it doesnt work too, the only change that i can see is the label is hide when i. But it is containing it, it's just withing the ng-content projection. So instead, just add an errorState property to your custom component that checks the ngControl that was injected into the constructor, like this: get errorState () { return this. Both form elements are using the same variable. As stated in Form field | Angular Material > Error: mat-form-field must contain a MatFormFieldControl. ts. Any way around this?mat-form-field must contain a MatFormFieldControl and already imported. I want to make a Textbox component using Angular material form controls. Error: mat-form-field must contain a MatFormFieldControl. Implementing. Angular material - Cannot find name 'MAT_FORM_FIELD_DEFAULT_OPTIONS' 1. That’s because our component has not implemented MatFormFieldControl. mat-form-field must contain a MatFormFieldControl and already imported. I have tried to use the old methods from various answers here but none seem to work. Hot Network Questions Why don't guitar. See the live demo. But in your i case i would not create a whole new quill component. If 'mat-form-field' is an Angular component, then verify that it is part of this module. This is the HTML code: <mat-form-field> <mat-label>Event Graphic</mat-label> <ngx-mat-file-input placeholder="Basic Input". HTML : Angular: mat-form-field must contain a MatFormFieldControl [ Gift : Animated Search Engine : ] HTML : Angular: mat-form-fie. Angular material form not working - mat-form-field must contain a MatFormFieldControl. Q&A for work. fb. <form [formGroup]='ResEditGroup'> <mat-form-field> <mat-label>Title</mat-label> <input formControlName='title' matInput placeholder="Title" required/> </mat-form-field> Below are the changes I have made. 3. mat-form-field must contain a MatFormFieldControl. However, it is important to note that the `mat-form-field` must contain a `MatFormFieldControl` in order to function properly. Stuck on an issue? Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. has anyone succesfully wrapped ng-select for angular material, so it actually aligns and behaves like all the other fields? we decided against ng-select because of this and used ngx-mat-select-search instead, which is buggy and has a lot of boilerplate code. 3. link Providing our component as a MatFormFieldControl The first step is to provide our new component as an implementation of the MatFormFieldControl interface that the. It will resolve your problem. somehow I see ERROR Error: mat-form-field must contain a MatFormFieldControl. Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control. Hint labels are specified in one of two ways: either by using the hintLabel property of <mat-form-field>, or by adding a. Update app. About; Products. When I try submit form and when I console. 0. log() it only appear null without value. The problem is that when I run the code, I get the error: mat-form-field must contain a MatFormFieldControl. 1. has anyone succesfully wrapped ng-select for angular material, so it actually aligns and behaves like all the other fields? we decided against ng-select because of this and used ngx-mat-select-search instead, which is buggy and has a lot of boilerplate code. Later I have found out that I have missed to add. No branches or pull requests. 3. but not inside a mat-form-field :( <mat-form-f. ). Error: mat-form-field must contain a MatFormFieldControl. 0. The mat-form-field supports 4 different appearance variants which can be set via the appearance input. Related Posts: (change) vs (ngModelChange) in angular. Add Answer . Angular – mat-form-field must contain a MatFormFieldControl and already imported. Angular Error: "mat-form-field' is not a known element" 5. When this time you've forgot to add MatInputModule to your. component. Also, I've already checked angular2 rc. controlType . It's generally helpfully to find the smallest version of your problem that's still broken. mat-form-field must contain a MatFormFieldControl and already imported. Angular material form not working - mat-form-field must contain a MatFormFieldControl. Asked on September 30, 2019. In my case I had a mat-form-field with *ngIf and the fix was wrapping the mat-form-field in another element and allpy the *ngIf on him. Open in StackBlitz. 112. If 'mat-form-field' is an Angular component, then verify that it is part of this module. No branches or pull requests. Milestone. Unfortunately, it appears the mentioned. The <mat-form-field> doesn't support <input type="file" /> and as far as I can see there is nothing that supports it. The issue was due to not importing the MatInputModule in the app. html. This will set the color of the form field underline and floating label based on the theme colors of your app. Skip to content. Mat-Button Error:. how to use angular-editor with mat-form-field ? faccing issue with mat-form-field must contain a MatFormFieldControl #91. I have created a form that has inputs of text type and a mat-slider to get a numeric value // TS this. Closed Copy link leonlovett commented Jun 17, 2018. Error: mat-form-field must contain a MatFormFieldControl I want my mat-slide-toggle inside my mat-form-field so i can get the styling. I guess this has to do with mat-form-field not directly containing a matInput-field. ,Now we will bind the data to angular material checkbox. Follow edited Oct 6, 2017 at 10:35. 0. Angular Material form issue: angular mat-form-field must contain MatFormFieldControl Hot Network Questions Negative intersection number between curve and effective divisorThanks for contributing an answer to Stack Overflow! Please be sure to answer the question. mat-form-field must contain a MatFormFieldControl and already imported. mat-form-field must contain a MatFormFieldControl and already imported. e. I tried : @include mat. mat-form-field must contain a MatFormFieldControl错误的解决方法. I checked all the imports inside the module: imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatTabsModule, MatCardModule, MatFormFieldModule,. Angular: mat-form-field must contain a MatFormFieldControl. com. choices [1] });I'm trying to open an OpenDialog window from a table list and I'm receiving this error: ERROR Error: mat-form-field must contain a MatFormFieldControl. To fix mat-form-field must contain a MatFormFieldControl error follow the below steps. Connect and share knowledge within a single location that is structured and easy to search. mat-form-field must contain a matformfieldcontrol textarea at-form-field must contain a MatFormFieldControl. Validate a form using Angular-material. Did you forget to add matInput to the native input or textarea element?" What is the expected behavior? mat-form-field shall see that i have added matInput to the input field. 2. 1. Hot Network Questions Meaning of 'for' in 'read poems for grammatical correctness' Understanding ZFC Author's last name is misspelled online but. 0. module. Mat-table Sorting Demo not Working. Hot Network Questions Are GX ("aviation") connectors unsafe for high voltages?Uncaught Error: Template parse errors: Can't bind to 'dividerColor' since it isn't a known property of 'mat-form-field'. Angular: mat-form-field must contain a MatFormFieldControl. Now, these 8 steps are coming from steps module which having 8 different step form. The mat-form-field has four appearance properties, these are: Legacy — this is the default style. If I add *ngIf to my material input, it says "mat-form-field must contain a MatFormFieldControl. – Mrk Sef. Updated: Removed previous version as Optional Chaining not supported in [ (value)]. Just remove 'ngModel' from your inputs. 1 'mat-form-field' is not a known element: 1. Getting ERROR mat-form-field must contain a MatFormFieldControl. I try to reduce the height of my mat-input, I don't want to use ::ng-deep and would use the theme density of material angular theming. The form will still work without it. I have the same input 2 times. Share. Angular: mat-form-field must contain a MatFormFieldControl. Angular 10: ERROR Error: mat-form-field must contain a MatFormFieldControl. Hot Network. I guess this has to do with mat-form-field not directly containing a matInput-field. I am triing to create dialog with input fields using angular material mat-form-field. To fix mat-form-field must contain a MatFormFieldControl error follow the below steps. js:6272 ERROR Error: mat-form-field must contain a MatFormFieldControl. . 1313 Can't bind to 'formGroup' since it isn't a known property of 'form'. If 'mat-form-field' is an Angular. Angular 10: ERROR Error: mat-form-field must contain a MatFormFieldControl. component. Add Answer . Follow edited Jan 16, 2022 at 9:42. I'd like to implement an Angular Material custom form field following this guide: But I keep having this error: ERROR Error: mat-form-field must contain a MatFormFieldControl. 11. Copy. I hope some of you can enlighten me in this case. The guidance provided by Angular Material is directed more at creating a new form control using primitive elements rather than utilising/wrapping existing Angular Material form controls. Angular 10: ERROR Error: mat-form-field must contain a MatFormFieldControl. To implement stripe in my angular 6 material project, I am getting mat-form-field must contain a MatFormFieldControl. mat-form-field . mat-form-field-flex{ background-color: rgb(255, 0, 0); } as well as you can use your style. Please let me know what kinds of code do you want to check else. mat-form-field must contain a MatFormFieldControl. . The legacy appearance is the default style that the mat-form-field has traditionally had. Angular Material form issue: angular mat-form-field must contain MatFormFieldControl. A lot of things from mat-form-field depends on direct input child with matInput directive. Adrian Kokot. . html:33 ERROR Error: mat-form-field must contain a MatFormFieldControl. Error:mat-form-field must contain a MatFormFieldControl. We recommend a specificity of at. The mat-form-field must contain a MatFormFieldControl. ts. 6. I use the following code for an input field to pick a single date. link Form field appearance variants. The elements like <input> or <textarea>, which are placed inside mat-form-field acts as form field controls. Cannot install npm package in Angular project. html. It shows the input box with an underline underneath it. I hope some of you can enlighten me in this case. You can try adding any form field control and it will work. The value of the attribute is irrelevant, which is why you. <mat-form-field> <input matInput hidden> <ng-content></ng-content> </mat-form-field>. exception on @merlosy solution implementation :. ERROR Error: mat-form-field must contain a MatFormFieldControl. Hi Guys ,I have faced this error ERROR Error: mat-form-field must contain a MatFormFieldControl. Improve this question. – Mrk Sef. group({ dailyConsumption: ['', Validators. Hint labels . Viewed 10k times. I am currently looking deeper at some of the warnings I am getting in my Jasmine/Karma tests and when I tried adding the MatFormFieldModule and MatInputModule as follows: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MatDialogRef,. We try to import angular material using. Angular Material form issue: angular mat-form-field must contain MatFormFieldControl Hot Network Questions Getting rid of cube roots in the form of (a+b)+(a-b)formControlName for mat-list gives 'mat-form-field must contain a MatFormFieldControl' 4 Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field controlI've tried adding ngDefaultControl but after that I receive "Error: mat-form-field must contain a MatFormFieldControl. The <mat-form-field> doesn't support <input type="file" /> and as far as I can see there is nothing that supports it. 不要在mat-form-field 控件上使用*ngIf ,而是在mat-form-field 元素上使用。 That's a very weird decision from AngularMD team - now how do I vertically align two form fields where one has mat-form-field with input inside and the other one has a checkbox but cannot use mat-form-field with its vertical layout styles. I am trying to add a form field with custom telephone number input control. # writing # career # beginners # aiAngular Material form issue: angular mat-form-field must contain MatFormFieldControl. 4. This directive adds chip-specific behaviors to the input element within <mat-form-field> for adding and removing chips. Don’t use *ngIf on mat-form-field control instead use it on mat-form-field element Viewed 19k times. textbox. js:6237 message:"mat-form-field must contain a MatFormFieldControl. Uncaught Error: Template parse errors: 'mat-form-field' is not a known element. mat-form-field must contain a MatFormFieldControl. Our current implementation is a little complicated and relies on private API of Material so I would avoid extending our implementation but that's up to you 😄!. 3 <mat-error> not working inside ControlValueAccessor when inheriting validations from custom formControl in parent. link Form field appearance variants . You are using mat-form-field without any form field control, and hence the issue. Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. group ( { description: ["descriptionhere", []], data: new FormControl (this. The following Angular Material components are designed to work inside a <mat-form-field>: <input matNativeControl> & <textarea matNativeControl> (version 7 & newer) <select matNativeControl> (version 7 & newer) <input matInput> & <textarea. component. what is difference between md-form-field and mat-form-field. Calling the submit button of the form outside the form in angular. We also would have to import appropriate. mat-form-field must contain a MatFormFieldControl. Closed cpratiksha opened this issue May 14, 2019 · 13 comments ClosedDuring my digital escapades, I stumbled upon a rather techy question that a few of you might have googled - "Mat form field must contain a MatFormFieldControl?" It took me back to those days in New York when I was dabbling in the digital side of magazines, always surrounded by talented web developers. Provide details and share your research! But avoid. mat-form-field must contain a MatFormFieldControl. If you are using Angular CLI, the FormsModule is already installed by default. Update app. 2. 2. – Gérôme Grignon. Guide: “mat-form-field must contain a MatFormFieldControl” The `mat-form-field` is a fundamental component in Angular Material that allows us to create beautiful and accessible forms. I am trying to style some mat-form-fields from angular material. Pizza" value="Sushi"> </mat-form-field>. The form will still work without it. Hot Network Questions Repeated punctures at the valve step Convert 64-bit Gray code to integer How to calculate effect of different voltage. module. 484 mat-form-field must contain a MatFormFieldControl. data), datatype. 1. To fix it, the control must be there, so I have used. Mat Dialog is not rendering. 3. overview api examples. disabled: boolean. Paramjeet. Whether the control is disabled. What is the expected behavior? mat-radio and mat-radio-group should work inside mat-form-field so that forms contain. The <mat-form-field> will add a class based on this type that can be used to easily apply special styles to a <mat-form-field> that contains a specific type. Improve this question. . Angular 10: ERROR Error: mat-form-field must contain a MatFormFieldControl. " Angular. Hot Network Questions Solving a limit by the. fonts. So, I am having problems using mat-select with mat-form-field . Angular Material - How to set value to the Mat Date Range Picker. Hi Guys ,I have faced this error ERROR Error: mat-form-field must contain a MatFormFieldControl. If someone knows what is happening I will be grateful. For the purpose of code re-use and to maintain consistent functionality across my web app, I created an input component in my app whose role is to embed a mat-input in a parent form. Two mat-slide-toggle with reactiveForms. mat-form-field must contain. Javascript form field in angular material code example. あなたの`mat-form-field` に `<input>`または `<textarea>`要素を含む場合、`matInput` ディレクティブを追加し、`MatInputModule` をインポートしていることを確認してください。 そうでなければ、アプリケーションで`mat-form-field must contain a MatFormFieldControl` エラーが発生します。 Bug: What is the expected behavior? The MatFormField component should render properly, as I am passing an input node with the "matInput" attribute in as a ProjectableNode What is the current behavi. {"payload":{"allShortcutsEnabled":false,"fileTree":{"src/material/form-field":{"items":[{"name":"directives","path":"src/material/form-field/directives","contentType. at. 1. We are trying to wrap material design's Components like this: field: <mat-form-field> <ng-content></ng-conten. ts file but I am facing the below. mat-form-field must contain a MatFormFieldControl and already imported. Favourite Share. Asking for help, clarification, or responding to other answers. As an example, we can add <input> element along with matInput directive as: <mat-form-field> <input matInput placeholder="Input"> </mat-form-field>. 2. And so, I felt compelled to. Learn more about Teams Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control 3 <mat-error> not working inside ControlValueAccessor when inheriting validations from custom formControl in parent component 1. mat-form-field must contain a MatFormFieldControl. The problem is, the input field doesn't get show on the website but it's clickable, but the date-icon doesn't exists. I used the example of the phone from. – YSFKBDY. Sep 29, 2020 at 15:28. this is my child controller: @Input () building: Building; @ViewChild. See the test 'mat-form-field should detect errors after validations are triggered' in github. Asking for help, clarification, or responding to other answers. Hot Network Questions Overstayed my visa in Germany by 9 daysError: mat-form-field must contain a MatFormFieldControl Vous seriez tenté de les utiliser sans mat-form-field mais vous perdriez alors les fonctionnalités built-in et la cohérence graphique. mat-form-field must contain a matformfieldcontrol textarea at-form-field must contain a MatFormFieldControl. component: app. If you use the following class : ::ng-deep . Copy. I need to custom style the mat-form-field instance, in particular, remove the whitesmoke background color applied by the prebuilt theme I am using in my example. I checked all the imports inside the module: imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatTabsModule, MatCardModule, MatFormFieldModule,. i. ", but I have the mat-input right behind it (also tried it before ngIf) Angular Material: ERROR Error: mat-form-field must contain a MatFormFieldControl. htmlI'm creating a custom input component to be used in my angular material forms, but assigning a mat-label in the form field where the component is used has no effect. A button's disabled property is false by default so the button is enabled. Asking for help, clarification, or responding to other answers. Outside <mat-form-field> things start to branch <mat-form-field> is designed to host a limited amount of controls element types as we already explained, so for type="radio" and type="range" in our example we need to setup something different. As stated in Form field | Angular Material > Error: mat-form-field must contain a MatFormFieldControl. Angular – mat-form-field must contain a MatFormFieldControl; Angular2 how to know if an input is of type radio with reactive forms; Angular – Disable (make read-only) text input on mat-datepicker when using a reactive. We'll be right back. Angular: mat-form-field must contain a MatFormFieldControl. create a directive that links to all mat-form-field components (directives) with appearance attribute set to outline; listen to document. With this I dont need to create a new FormFroup and FormControl using newWe are trying to build our own form-field-Components during unser Company. link Form field appearance variants. Some of these mat form fields are working but some are not working. 1 'mat-form-field' is not a known element: 1. if the cell is a string it will have an input field of type 'text'. BroadCastComponent. I want to show the first one on the first case and the second one on the second case. The question asks how to add a custom phone number input. angular material select and input inside the same field. Native HTML5 support is inconsistent or nonexistent. But when you unchecked the I accept the date and check again the form is invalid because with uncheck the form holds the above field which contains required and the form is invalid if optDate does not have value. The text was updated successfully, but these errors were encountered: 👍 55 saithis, marci4, slavrov, hansregeer, ggraat, raouldh, thundur, HannaBabrouskaya, alexanto, seritools, and 45 more reacted with thumbs up emoji 👀 1 bmtheo reacted with eyes emoji mat-form-field must contain a MatFormFieldControl. 1. Mat-form-field must contain a MatFormFieldControl. " so it doesn't really help. Connect and share knowledge within a single location that is structured and easy to search. mat-form-field must contain a matformfieldcontrol unit test. We recommend a specificity of at. 1 'mat-form-field' is not a known element: 1. mat-form-field must contain a MatFormFieldControl. mat-form-field must contain a MatFormFieldControl and already imported 4 Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control Angular Material is a popular UI component library that provides a variety of easy-to-use, stylish components for building modern web. 5 custom input, No value accessor for form control with unspecified name , didn't help. Only on chrome. 0 votes. overview api examples. 28. Angular: mat-form-field must contain a MatFormFieldControl. @YSFKBDY I changed options of the second mat-select to options2. Later I have found out that I have missed to add the attribut. I'm trying to make Material 2's MatInput listen to a service. This applies to your other fields as well. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule. I want to build a form-field-Components. The standard appearance is a slightly updated version of the legacy. Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control. mat-form-field must contain a MatFormFieldControl. – Navaneethan Arun Jun 5, 2018 at 5:25Angular Material form issue: angular mat-form-field must contain MatFormFieldControl Hot Network Questions A stranger messaged me “please put 10 dollars on my card”, followed by a card number. Angular: mat-form-field must contain a MatFormFieldControl. mat-form-field must contain a MatFormFieldControl and already imported. In other words, it's saying that your input must be " static ", you can't have a *ngIf encapsulating it. Error: No value accessor for form control with name: 'foldersList' Error: mat-form-field must contain a MatFormFieldControl. ts Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control 0 Mat-Button Error: mat-form-field must contain a MatFormFieldControl <mat-form-field> has a color property which can be set to primary, accent, or warn. The following Angular Material components are designed to work inside a <mat-form-field>: 2. form-field-density (-5); in my scss main file, it doesn't work, i try to define my theme with density, it doesnt work too, the only change that i can see is the label is hide when i. EDIT: This is the point where you'll be facing another error: ERROR Error: mat-form-field must contain a MatFormFieldControl. I'm not sure if for my case I should use FormControl or NgModel. Did you forget to add mdInput to the native input or textarea element?. Comment. What is the current behavior? mat-form-field doesn't notice that the input field has a matInput on it. Import MatInputModule and MatFormFieldModule; Add matInput directive to. I simply want to override the color of the input when I haven't touched. But it is containing it, it's just withing the ng-content projection. Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control. 3 Unable to position angular material mat-card using flex layout. mat-form-field must contain a MatFormFieldControl and already imported. Though it is not very clear but add formControl "mat-selection-list"Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control 0 Mat-Button Error: mat-form-field must contain a MatFormFieldControlI am triing to create dialog with input fields using angular material mat-form-field. 0. The following Angular Material components are designed to work inside a <mat-form-field>: & (version 7 & newer) (version 7 & newer) & (version 5 & 6) <mat-select> <mat-chip-list> Breaking News. Related Posts: (change) vs (ngModelChange) in angular. . 3209. 4 and the stackblitz is not working for me :) (But I would love a material theme) And btw, if the material theme could contains the material checkbox for the multiple select, that would be awesome !!so the answer is: if we want to use our custom wrappe, we need to create a custom form-field-control for it, in our case we need to create custom mat-form-field-control //our custom form field controlI have created a new angular form, that includes both text input and now a select box. In this example we'll use my-tel-input as our control type which will result in the form field adding the class mat-form-field-my-tel-input. It would be great if the component could be used inside a <mat-form-field> Currently if I include the editor inside the mat-form-field like this: <mat-form-field> <editor></edi. That’s because our component has not implemented MatFormFieldControl. mat-form-field-underline { display: none;} The underline is always going to be hidden but you can apply this style conditionnaly with the use of ngClass. ts file. Mubeen Naeem answered on November 10, 2020 Popularity 9/10 Helpfulness 8/10. 0. 3 <mat-error> not working inside ControlValueAccessor when inheriting validations from custom formControl in parent component. Modified 5 years, 6 months ago. Do not wrap the buttons with mat-form-field. What solutions do I have to only change the color. mat-form-field must contain a MatFormFieldControl. ,The MatFormField component throws the mat-form-field must contain a MatFormFieldControl error,I want to be able to dyamically load a mat-form-field component and pass in the input node I want inside via the. This will set the color of the form field underline and floating label based on the theme colors of your app.