ngx-mat-file-input mat-form-field must contain a MatFormFieldControl

Question

I am building an angular project with angular material. I have an error when using . Some of these mat form fields are working but some are not working. I was trying to find out the solution but failed. Let me attach my codes. Please let me know what kinds of code do you want to check else.

This is the 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 is package.json file content:

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config=proxy.config.json",
    "build": "ng build",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.5",
    "@angular/cdk": "^11.2.11",
    "@angular/common": "~11.2.5",
    "@angular/compiler": "~11.2.5",
    "@angular/core": "~11.2.5",
    "@angular/forms": "~11.2.5",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.2.5",
    "@angular/platform-browser-dynamic": "~11.2.5",
    "@angular/router": "~11.2.5",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/pro-solid-svg-icons": "^5.15.3",
    "confetti-js": "^0.0.18",
    "linkifyjs": "*",
    "magic-sdk": "^4.3.0",
    "moment": "^2.29.1",
    "ngx-material-file-input": "^2.1.1",
    "rxjs": "~6.6.0",
    "socket.io-client": "^2.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.4",
    "@angular/compiler-cli": "~11.2.5",
    "@types/jasmine": "~3.6.0",
    "@types/linkifyjs": "^2.1.3",
    "@types/node": "^12.11.1",
    "@types/socket.io-client": "^1.4.36",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

And this is the error log:

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)

Answer 1

I guess you did not import the module.

import { MaterialFileInputModule } from 'ngx-material-file-input';