angular项目遇到的问题（二）集合

一、使用angular的formGroup实现校验时报错

ngModel cannot be used to register form controls with a parent formGroup directive

原因

在最外层的form中使用了 formGroup 指令，但在下面的某个input 插件中，使用了ngModel 指令，但没有加入formControl 指令或 formControlName 属性。

解决方法

1.保证在form表单下所有input元素中添加 formControl 指令或 formControlName 属性

并在相应的component.ts 中定义用于验证的FormControl。

constructor(
    public gatewayDialogRef:MatDialogRef<GatewayDialogComponent>,//回传数据使用MatDialogRef
    @Inject(MAT_DIALOG_DATA) public data,//接收传递过来的数据使用 MAT_DIALOG_DATA
    private fb:FormBuilder,
    public dialog:MatDialog
){
    this.gatewayAddForm = this.fb.group({
        name:['',[Validators.required,Validators.pattern(/^[一-龥A-Za-z0-9_^%&',;=?@$"]+$/)]],
        netconfFlag:['',[Validators.required]]
    });
}
           

1. 添加 ngModelOptions 指令

指出它是独立的，因此它不与表单控件冲突：

参考https://blog.csdn.net/qq_33486082/article/details/83901302

二、mat-error设置动态校验规则

场景

在表单中有多个级联表单组件

例如：当我在前面选择了我的等级为D时，后面填写的成绩需要校验在小于60分范围

当我在前面选择了等级为C时，后面填写的成绩范围需要校验是否在60～70分范围等

这样，就需要动态改变校验规则

思路一

，直接在设置校验规则时，在Validate.min（）中填写一个变量Validate.min（minScore）

但是这样尝试失败，因为minScore只能获取到声明时到值，后面改变时无法获取到

思路二

：根据前面等级选择的值不同时，通过ngIf动态展示mat-error元素，例如：

当等级输入不同时，我设置一个变量scoreFlag，以及多个mat-error元素，想根据等级值动态显示我的mat-error元素。

<mat-form-field>
              <input matInput [formControl]="score">
              <mat-error *ngIf="score.invalid && scoreFlag === 'A'>成绩须在80-90范围内</mat-error>
              <mat-error *ngIf="score.invalid && scoreFlag === 'B'>成绩须在70-80范围内</mat-error>
</mat-form-field>
           

我检查了控制台，当我在等级中输入两个不同的输入时，scoreFlag确实得到了正确的返回。但是，它仍然没有在DOM中显示错误。

最终查找到解决方式

MatFormField中mat-error仅在FormControl出现错误时显示元素。它不会仅仅因为您告诉它通过ngIf而显示哪些场景只能在表单控件状态下工作。解决此问题的一种方法是创建一个自定义验证器，并使用它来检查密码是否匹配。您也可以在一个函数中的字段上设置错误。那应该是这样的：

judgeScore(): boolean {

    const matched: boolean = this.scoreFlag === ‘A’;

    console.log('equaltest', matched);

    if (matched) {
        this.groupForm.controls.score.setErrors(null);
    } else {
        this.groupForm.controls.score.setErrors({
           min:80,
           max:90
        });
    }

    return matched;
}
           

参考https://stackoverflow.com/questions/52480822/angular-material-mat-error-not-showing-despite-true-methods

三、使用material ui 时报了很多无法识别mat-xxx标签等的错误

错误NG6002：出现在AppModule的NgModule.imports中，但无法解析为NgModule类
           

使用material ui 时报了很多无法识别mat-xxx标签等的错误

但项目中原本就是用的这个组件，应该不是没有加载组件的问题

许多人重启之后解决了问题，但我这边问题主要出现在

参考https://stackoverflow.com/questions/60290309/error-ng6002-appears-in-the-ngmodule-imports-of-appmodule-but-could-not-be-res