angular项目遇到的问题（一）—ngModel cannot be used to register form controls with a parent formGroup directive

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

在使用表单校验时产生了这个报错：

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

原因

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

解决方法

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

<mat-radio-group [(ngModel)]="netconfFlag" [formControl]="netconfFlag">

并在相应的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]]
    });
}

2. 添加 ngModelOptions 指令

<mat-radio-group [(ngModel)]="netconfFlag" [ngModelOptions]="{standalone: true}"> 

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

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