ngx-mat-file-input mat-form-field 必须包含一个 MatFormFieldControl

Posted 2023-03-13

【中文标题】ngx-mat-file-input mat-form-field 必须包含一个 MatFormFieldControl

【英文标题】：ngx-mat-file-input mat-form-field must contain a MatFormFieldControl

【发布时间】：2021-08-17 01:10:58

【问题描述】：

我正在用角材料构建一个角项目。使用时出现错误。其中一些垫子表单字段正在工作，但有些则不起作用。 我试图找出解决方案但失败了。 让我附上我的代码。请让我知道您还想检查哪些类型的代码。

这是 html 代码：

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

这是 package.json 文件内容：

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

这是错误日志：

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)

【问题讨论】：

懒人的stackblitz？

嗨@garbear！很抱歉不能分享这个项目。不是公共项目……你要检查哪部分代码？

ngx-mat-file-input 是从哪里来的，它可能不是上述的mat-form-field，或者您缺少一些导入。

我已经安装了节点模块"ngx-material-file-input": "^2.1.1"我还应该导入什么？

您是否导入了模块？ import MaterialFileInputModule from 'ngx-material-file-input';

【参考方案1】：

我猜你没有导入模块。

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

【讨论】：

你好猞猁！你愿意帮我解决另一个与这个问题非常相似的问题吗？我已将下一个 HTML 代码添加到我的问题中。

错误日志是一样的。我已经添加了 MatListModule。我该怎么办？

是的，我做到了。已添加。

你是从正确的路径导入的吗？结构在几个版本前已更改：import MatListModule from '@angular/material/list';

是的，这是我的代码import MatListModule from '@angular/material/list'; 但它仍然显示几个错误。 :(