angular - 将反应式表单组传递给组件会将值绑定回父级

Question

这已成为非常恼人的行为。我有一个如下所示的 JSON 对象：

"formElementRegistry": [
    {
        "formElement": {
            "id": 53,
            "name": "Multiple Choice",
            "componentName": "multiple-choice",
            "icon": "format_list_bulleted"
        },
        "formElementConfiguration": {
            "required": true,
            "id": 95,
            "label": "My multi choice",
            "formChoiceOption": [
                {
                    "id": 43,
                    "name": "M"
                },
                {
                    "id": 44,
                    "name": "C"
                }
            ]
        },
        "position": 0
    }
]

在列表组件中，我循环formElementRegistry显示单个 div，如下所示：

<div *ngIf="this.form?.get('formElementRegistry')">
    <div cdkDrag *ngFor="let formRegistryElement of this.getFormElementRegistry()?.controls; let i = index;">
        <app-selected-form-element
            [ngClass]="'selected-form-element'"
            [formRegistryElement]="formRegistryElement"
            [formRegistryElementIndex]="i"
          ></app-selected-form-element>
        </div>
    </div>
</div>

模板app-selected-from-element如下：

<div *ngIf="formRegistryElement?.get('formElementConfiguration')">
    <mat-icon> {{formRegistryElement?.get('formElement')?.get('icon')?.value}} </mat-icon>

    <p> {{formRegistryElement?.get('formElementConfiguration')?.get('label')?.value}} </p>

    <span [ngClass]="'action-icons'">
        <mat-icon
            matTooltip="Edit {{formRegistryElement?.get('formElement')?.get('name')?.value}} settings"
            [ngClass]="'clickable'"
            (click)="this.formBuilderService.editFormElementConfigurationIndex.next(formRegistryElementIndex); this.formBuilderService.editFormElementConfiguration.next(formRegistryElement?.get('formElementConfiguration'))"
        >edit</mat-icon>

        <mat-icon
            matTooltip="Remove {{formRegistryElement?.get('formElement')?.get('name')?.value}}"
            [ngClass]="'clickable'"
            (click)="this.formBuilderService.deletedFormElement.next(this.formRegistryElementIndex);this.snackBar.open(formRegistryElement?.get('formElement')?.get('name')?.value + ' removed!', 'Success');">delete_forever</mat-icon>

    </span>
</div>

this.formBuilderService.editFormElementConfiguration是一个ReplaySubject-public editFormElementConfiguration = new ReplaySubject<AbstractControl | null | undefined>();

该app-form-element-configuration组件在 onInit 中有一个侦听器，用于检索 formElementConfiguration 的表单组，该表单组在按下编辑按钮时发出app-selected-from-element（如上所示）

太好了，配置组件在单击编辑时以正确的数据启动

问题是在配置组件中所做的任何表单数据更改都会绑定回父组件，而无需为此编写任何代码

为什么会这样？似乎将 FormGroup 传递给组件会自动将对其所做的任何更改绑定回父组件

我会更好地传递并formRegistryElement?.get('formElementConfiguration')?.value从中app-form-element-configuration创建一个新的 FormGroup 还是有办法将 FormGroups 传递给组件而无需将任何数据绑定回父级？

标签： angularangular-reactive-forms