Angular Forms 错误：类上有两个不兼容的装饰器

Question

我在编译表单项目时遇到问题：

\n

ERROR in Failed to compile entry-point @angular/forms (es2015 as esm2015) due to compilation errors:\n../../../node_modules/@angular/forms/fesm2015/forms.js:6219:1 - error NG1006: Two incompatible decorators on class\n\n6219 class MaxValidator extends AbstractValidatorDirective {\n     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n6220     constructor() {\n     ~~~~~~~~~~~~~~~~~~~\n ...\n6237     }\n     ~~~~~\n6238 }\n     ~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6279:1 - error NG1006: Two incompatible decorators on class\n\n6279 class MinValidator extends AbstractValidatorDirective {\n     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n6280     constructor() {\n     ~~~~~~~~~~~~~~~~~~~\n ...\n6297     }\n     ~~~~~\n6298 }\n     ~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6758:31 - error NG6001: The class 'MinValidator' is listed in the declarations of the NgModule '\xc9\xb5InternalFormsSharedModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.\n\n6758                 declarations: SHARED_FORM_DIRECTIVES,\n                                   ~~~~~~~~~~~~~~~~~~~~~~\n\n  ../../../node_modules/@angular/forms/fesm2015/forms.js:6279:7\n    6279 class MinValidator extends AbstractValidatorDirective {\n               ~~~~~~~~~~~~\n    'MinValidator' is declared here.\n../../../node_modules/@angular/forms/fesm2015/forms.js:6758:31 - error NG6001: The class 'MaxValidator' is listed in the declarations of the NgModule '\xc9\xb5InternalFormsSharedModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.\n\n6758                 declarations: SHARED_FORM_DIRECTIVES,\n                                   ~~~~~~~~~~~~~~~~~~~~~~\n\n  ../../../node_modules/@angular/forms/fesm2015/forms.js:6219:7\n    6219 class MaxValidator extends AbstractValidatorDirective {\n               ~~~~~~~~~~~~\n    'MaxValidator' is declared here.\n../../../node_modules/@angular/forms/fesm2015/forms.js:6279:7 - error NG6003: Appears in the NgModule.exports of \xc9\xb5InternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.\n\nIs it missing an Angular annotation?\n\n6279 class MinValidator extends AbstractValidatorDirective {\n           ~~~~~~~~~~~~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6219:7 - error NG6003: Appears in the NgModule.exports of \xc9\xb5InternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.\n\nIs it missing an Angular annotation?\n\n6219 class MaxValidator extends AbstractValidatorDirective {\n           ~~~~~~~~~~~~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6754:7 - error NG6003: Appears in the NgModule.exports of FormsModule, but itself has errors\n\n6754 class \xc9\xb5InternalFormsSharedModule {\n           ~~~~~~~~~~~~~~~~~~~~~~~~~~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6754:7 - error NG6003: Appears in the NgModule.exports of ReactiveFormsModule, but itself has errors\n\n6754 class \xc9\xb5InternalFormsSharedModule {\n           ~~~~~~~~~~~~~~~~~~~~~~~~~~\n

\n

这是我的表单类：

\n

import { Component, Injectable, OnInit } from '@angular/core';\nimport { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';\nimport { Country, State, City } from 'country-state-city';\nimport { ApiService } from '../service/api.service';\n\n@Component({\n  selector: 'app-form',\n  templateUrl: './form.component.html',\n  styleUrls: ['./form.component.css']\n})\n\nexport class FormComponent implements OnInit {\n\n  form: FormGroup; // from group to create form\n  isSubmit: boolean = false;\n\n  states: any = [];\n  cities: any = [];\n\n\n  constructor(private fb: FormBuilder, private apiService: ApiService) { }\n\n\n  ngOnInit(): void {\n    this.states = State.getStatesOfCountry('US');\n    this.create();\n  }\n\n  create() {\n    this.form = this.fb.group({\n      cn: ['', [Validators.required]],\n      org: ['', [Validators.required]],\n      ou: ['', [Validators.required]],\n      city: [null, [Validators.required]],\n      state: [null, [Validators.required]],\n      email: ['', [Validators.required, Validators.email]],\n      keyType: ['', [Validators.required]],\n      keyLength: ['', [Validators.required]],\n    });\n  }\n\n  // getter of form controls\n  get f() { return this.form.controls; }\n\n  onStateChange() {\n    this.cities = City.getCitiesOfState('US', this.form.controls.state.value);\n  }\n\n  submitForm() {\n    this.isSubmit = true;\n    if (this.form.invalid) {\n      return;\n    }\n\n    //logging all the form data you can call your rest api and submit this data from here\n    console.log(this.form.value)\n    this.apiService.post(this.form.value).subscribe((res: any) => {\n      console.log(res);\n    })\n  }\n\n}\n

\n

我不确定问题是什么，我尝试删除node_modules文件夹以及重新安装它并清理缓存。如果有帮助，我会附上我的package.json文件夹。我正在运行 Angular 10 并尝试利用表单类。会不会是版本不匹配？我的 CLI 和本地版本相同。

\n

{\n  "name": "single-form",\n  "version": "0.0.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "watch": "ng build --watch --configuration development",\n    "test": "ng test"\n  },\n  "private": true,\n  "dependencies": {\n    "@angular/animations": "~10.0.11",\n    "@angular/cdk": "^10.1.3",\n    "@angular/common": "~10.0.11",\n    "@angular/compiler": "~10.0.11",\n    "@angular/core": "~10.0.11",\n    "@angular/forms": "~10.0.11",\n    "@angular/material": "^10.1.3",\n    "@angular/platform-browser": "~10.0.11",\n    "@angular/platform-browser-dynamic": "~10.0.11",\n    "@angular/router": "~10.0.11",\n    "crypto": "^1.0.1",\n    "dom-parser": "^0.1.6",\n    "file-saver": "^2.0.5",\n    "material-icons": "^1.0.0",\n    "ng-knife": "^0.2.8",\n    "oauth-authentication": "^0.4.0",\n    "rxjs": "~6.5.5",\n    "tslib": "^2.0.0",\n    "zone.js": "~0.10.3"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "~0.1000.7",\n    "@angular/cli": "~10.0.7",\n    "@angular/compiler-cli": "~10.0.11",\n    "@types/jasmine": "~3.5.0",\n    "@types/jasminewd2": "~2.0.3",\n    "@types/node": "^12.11.1",\n    "codelyzer": "^6.0.0",\n    "jasmine-core": "~3.5.0",\n    "jasmine-spec-reporter": "~5.0.0",\n    "karma": "~5.0.0",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage-istanbul-reporter": "~3.0.2",\n    "karma-jasmine": "~3.3.0",\n    "karma-jasmine-html-reporter": "^1.5.0",\n    "protractor": "~7.0.0",\n    "ts-node": "~8.3.0",\n    "tslint": "~6.1.0",\n    "typescript": "~3.9.5"\n  },\n  "browser": {\n    "crypto": false\n  }\n}\n

\n

Answer 1

降级 npm 版本后，它对我来说工作得很好。

我已经从 8.0.0 更改为 6.14.15 然后工作了。

npm install -g npm@6.14.15