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

Question

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

ERROR in Failed to compile entry-point @angular/forms (es2015 as esm2015) due to compilation errors:
../../../node_modules/@angular/forms/fesm2015/forms.js:6219:1 - error NG1006: Two incompatible decorators on class
6219 class MaxValidator extends AbstractValidatorDirective {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6220     constructor() {
~~~~~~~~~~~~~~~~~~~
...
6237     }
~~~~~
6238 }
~
../../../node_modules/@angular/forms/fesm2015/forms.js:6279:1 - error NG1006: Two incompatible decorators on class
6279 class MinValidator extends AbstractValidatorDirective {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6280     constructor() {
~~~~~~~~~~~~~~~~~~~
...
6297     }
~~~~~
6298 }
~
../../../node_modules/@angular/forms/fesm2015/forms.js:6758:31 - error NG6001: The class 'MinValidator' is listed in the declarations of the NgModule 'ɵInternalFormsSharedModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
6758                 declarations: SHARED_FORM_DIRECTIVES,
~~~~~~~~~~~~~~~~~~~~~~
../../../node_modules/@angular/forms/fesm2015/forms.js:6279:7
6279 class MinValidator extends AbstractValidatorDirective {
~~~~~~~~~~~~
'MinValidator' is declared here.
../../../node_modules/@angular/forms/fesm2015/forms.js:6758:31 - error NG6001: The class 'MaxValidator' is listed in the declarations of the NgModule 'ɵInternalFormsSharedModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
6758                 declarations: SHARED_FORM_DIRECTIVES,
~~~~~~~~~~~~~~~~~~~~~~
../../../node_modules/@angular/forms/fesm2015/forms.js:6219:7
6219 class MaxValidator extends AbstractValidatorDirective {
~~~~~~~~~~~~
'MaxValidator' is declared here.
../../../node_modules/@angular/forms/fesm2015/forms.js:6279:7 - error NG6003: Appears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
Is it missing an Angular annotation?
6279 class MinValidator extends AbstractValidatorDirective {
~~~~~~~~~~~~
../../../node_modules/@angular/forms/fesm2015/forms.js:6219:7 - error NG6003: Appears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
Is it missing an Angular annotation?
6219 class MaxValidator extends AbstractValidatorDirective {
~~~~~~~~~~~~
../../../node_modules/@angular/forms/fesm2015/forms.js:6754:7 - error NG6003: Appears in the NgModule.exports of FormsModule, but itself has errors
6754 class ɵInternalFormsSharedModule {
~~~~~~~~~~~~~~~~~~~~~~~~~~
../../../node_modules/@angular/forms/fesm2015/forms.js:6754:7 - error NG6003: Appears in the NgModule.exports of ReactiveFormsModule, but itself has errors
6754 class ɵInternalFormsSharedModule {
~~~~~~~~~~~~~~~~~~~~~~~~~~

这是我的表单类:

import { Component, Injectable, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Country, State, City } from 'country-state-city';
import { ApiService } from '../service/api.service';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
form: FormGroup; // from group to create form
isSubmit: boolean = false;
states: any = [];
cities: any = [];

constructor(private fb: FormBuilder, private apiService: ApiService) { }

ngOnInit(): void {
this.states = State.getStatesOfCountry('US');
this.create();
}
create() {
this.form = this.fb.group({
cn: ['', [Validators.required]],
org: ['', [Validators.required]],
ou: ['', [Validators.required]],
city: [null, [Validators.required]],
state: [null, [Validators.required]],
email: ['', [Validators.required, Validators.email]],
keyType: ['', [Validators.required]],
keyLength: ['', [Validators.required]],
});
}
// getter of form controls
get f() { return this.form.controls; }
onStateChange() {
this.cities = City.getCitiesOfState('US', this.form.controls.state.value);
}
submitForm() {
this.isSubmit = true;
if (this.form.invalid) {
return;
}
//logging all the form data you can call your rest api and submit this data from here
console.log(this.form.value)
this.apiService.post(this.form.value).subscribe((res: any) => {
console.log(res);
})
}
}

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

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

Answer 1

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

我已经从8.0.0更改到6.14.15，然后工作。

npm install -g npm@6.14.15