角度类型“AbstractControl”缺少类型“FormGroup”中的以下属性：控件

Question

我正在研究 Angular FormArray，因此我正在研究本教程：https://www.youtube.com/watch?v =aOQ1xFC3amw \n不幸的是，我无法\xe2\x80\x99t 应用该教程。我的 HTML 部分出现错误。

\n

我用的是 Angular 11

\n

这是我的 HTML，显示了错误消息：

\n

    <div [formGroup]="myForm">\n         <ng-container formArrayName="demoTypes">\n\n                <ng-container *ngFor="let demoForm of demoFormArray.controls">\n\n                    <div [formGroup]="demoForm"><!--formGroup is as error underlined-->\n                       \n                    </div>\n\n                </ng-container>\n\n         </ng-container>\n    </div>\n\n

\n

错误信息是：

\n

\n

类型“AbstractControl”缺少类型“FormGroup”中的以下属性：controls、registerControl、addControl、removeControl 以及另外 3 个属性。

\n

\n

这是我的 TypeScript 类：

\n

\n    export class DemoComponent implements OnInit {\n\n        myForm!: FormGroup;\n\n        constructor(private formBuilder: FormBuilder) { }\n\n        ngOnInit(): void {\n            this.createForm();\n        }\n\n        createForm() {\n            this.myForm = this.formBuilder.group({\n                demoTypes: new FormArray([]),\n            });\n\n            this.addDemoTypes();\n        }\n\n        get demoFormArray() {\n            return this.myForm.controls["demoTypes"] as FormArray;\n        }\n\n        addDemoTypes(): void {\n            const demoControl = this.formBuilder.group({\n                isChecked: new FormControl(true),\n                demoFormControlName: new FormControl("This is the first one"),\n            });\n            this.demoFormArray.push(demoControl);\n        }\n    }\n\n

\n

这里的问题是什么\xe2\x80\x99？

\n

[编辑] \ "strictTemplates": falsentsconfig.json 中的设置解决了我的问题。但这是个好主意吗？

\n

"angularCompilerOptions": {\n"strictInjectionParameters": true,\n"strictInputAccessModifiers": true,\n"strictTemplates": false\n}\n

\n

Answer 1

你可以formGroupName使用

  <ng-container *ngFor="let demoForm of demoFormArray.controls; let i = index">

    <div [formGroupName]="i">
                    
    </div>
</ng-container>

当我们绑定到数字时，我们不会遇到打字稿错误

禁用strictTemplates？

不。启用后，strictTemplates您更有可能发现本来可以被忽视的问题。我认为把头埋在沙子里永远解决不了问题。你可能看不到危险，但危险仍然存在

Answer 2

对于那些试图弄清楚当您想继续在模板中使用 for 循环中的值时如何处理此问题的人，您可以定义一个 getter 来返回控件数组，以便将其强制转换为 FormGroup。

将 getter 添加到 typescript 类：

public get demoFormArrayControls() {
    return (this.myForm.controls["demoTypes"] as FormArray).controls as FormGroup[];
}

现在你需要在 html 中更改的是循环的集合：

<div [formGroup]="myForm">
    <ng-container formArrayName="demoTypes">
        <ng-container *ngFor="let demoForm of demoFormArrayControls">
            <div [formGroup]="demoForm">

            </div>
        </ng-container>
    </ng-container>
</div>