I am currently working on an angular project that utilizes angular material. I am encountering an issue where some of the mat form fields are functional while others are not. Despite my attempts to find a solution, I have been unsuccessful in resolving the problem. Below are snippets of my code for your reference. Kindly let me know if you require any specific sections of the code to investigate further.
Here is the snippet of HTML code:
<mat-form-field>
<mat-label>Event Graphic</mat-label>
<ngx-mat-file-input placeholder="Basic Input" formControlName="eventGraphicAttachment" ngDefaultControl>
</ngx-mat-file-input>
<mat-icon matSuffix>folder</mat-icon>
</mat-form-field>
...
<mat-form-field class="black-list">
<mat-list dense formControlName="eventBlackList" ngDefaultControl>
<mat-list-item> User1 </mat-list-item>
<mat-list-item> User2 </mat-list-item>
<mat-list-item> User3 </mat-list-item>
</mat-list>
</mat-form-field>
This section contains the content from my package.json file:
{
"name": "client",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config=proxy.config.json",
"build": "ng build",
"lint": "ng lint"
},
...
Additionally, an error log has been generated indicating the following error message:
ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.js:227)
at MatFormField._validateControlChild (form-field.js:712)
at MatFormField.ngAfterContentInit (form-field.js:519)
at callHook (core.js:2573)
at callHooks (core.js:2542)
at executeInitAndCheckHooks (core.js:2493)
at refreshView (core.js:9507)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)