如何获取嵌套的FormControl？

Question

这是我的表单结构：

form = new FormGroup({
name: new FormControl('', Validators.required),
comment: new FormControl(''),
endpointsPermissions: new FormControl({
  read: new FormControl(null),
  write: new FormControl(null)
}),
exportDefinitionsPermissions: new FormControl({
  read: new FormControl(null),
  write: new FormControl(null)
}),
sourcesPermissions: new FormControl({
  read: new FormControl(null),
  write: new FormControl(null)
})

});

我尝试在我的 html 文件中使用它，如下所示：

<mat-form-field appearance="fill" fxFlex="100">
    <mat-checkbox [formControl]="form.get('endpointsPermissions').value.read">{{"ROLES.READ" | translate}}</mat-checkbox>
</mat-form-field>

但它不起作用，我得到的错误是：

control.registerOnChange 不是一个函数

mat-form-field 必须包含 MatFormFieldControl。

那么我如何正确使用[formControl]和嵌套的FormControls。

Answer 1

mat-checkbox 在 mat-form-field 中不起作用。请参阅此内容以查看哪个元素在 mat-form-field 中起作用。 https://material.angular.io/components/form-field/overview

嵌套形式的正确方法是

form = new FormGroup({
        name: new FormControl('', Validators.required),
        comment: new FormControl(''),
        endpointsPermissions: new FormGroup({
            read: new FormControl(null),
            write: new FormControl(null)
        }),
        exportDefinitionsPermissions: new FormGroup({
            read: new FormControl(null),
            write: new FormControl(null)
        }),
        sourcesPermissions: new FormGroup({
            read: new FormControl(null),
            write: new FormControl(null)
        })
    });

和

<div fxLayout="column" fxFlex formGroupName="endpointsPermissions">
        <h2 mat-dialog-title>Permission</h2>
        <!-- Endpoints -->
        <div fxLayout="row" fxFlex fxLayoutGap="16px">
            <span>Endpoints Permission</span>
            <mat-checkbox matInput formControlName="read">Read</mat-checkbox>
        </div>
    </div>

Answer 2

现在可以了（感谢 Eliseo）：

form = new FormGroup({
    name: new FormControl('', Validators.required),
    comment: new FormControl(''),
    endpointsPermissions: new FormGroup({
        read: new FormControl(null),
        write: new FormControl(null)
    }),
    exportDefinitionsPermissions: new FormGroup({
        read: new FormControl(null),
        write: new FormControl(null)
    }),
    sourcesPermissions: new FormGroup({
        read: new FormControl(null),
        write: new FormControl(null)
    })
});

<mat-checkbox [formControl]="form.get('endpointsPermissions.read')">{{"ROLES.READ" | translate}}</mat-checkbox>