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 然后工作。