angular - Angular Forms 错误:类上有两个不兼容的装饰器
问题描述
编译表单项目时遇到问题:
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
}
}
解决方案
降级 npm 版本后,它对我来说工作正常。
我已经从 8.0.0 更改为 6.14.15 然后工作了。
npm install -g npm@6.14.15
推荐阅读
- linux - 如何删除打开 Linux 终端时默认运行的脚本?(WSL)
- python - 绘制 LED 光谱的峰值偏移
- reactjs - 如何在反应中导入npm包?
- laravel - 为什么 docker 容器不在 Windows 中运行?
- c# - 摧毁后重生 AI
- google-apps-script - 带有 BigQuery 的 Google Workspace 插件,用于记录使用情况
- python - 使用python在excel中创建一个下拉列表
- html - 移动视图的下拉无序列表
- ios - 将 Swift 框架嵌入到另一个框架 Xcode
- java - JDK 8('1.8.*')的要求检查失败!检测到的版本:空