How to get nested FormControl?-CodePudding

This is my form structure:

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)
})

});

and I tried to use it in my html-file like this:

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

but its not working and the errors I get are:

control.registerOnChange is not a function

mat-form-field must contain a MatFormFieldControl.

So how do i use [formControl] with nested FormControls correctly.

CodePudding user response：

mat-checkbox does not work inside mat-form-field. Refer to this to see which element works inside mat-form-field. https://material.angular.io/components/form-field/overview

Proper way for nested form is

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)
        })
    });

and

<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>

CodePudding user response：

Here's the complete HTML

    <form *ngIf="createMode || !isLoading" [formGroup]="form"
      fxFill fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="0px" >
  <div fxLayout="row wrap" fxLayoutGap="8px grid">
    <!-- Name -->
    <mat-form-field appearance="fill" fxFlex="100" fxFlex.gt-sm="50">
      <mat-label>{{"ROLES.NAME" | translate}}</mat-label>
      <input matInput formControlName="name" required data-test="name-input">
    </mat-form-field>

    <!-- Comment -->
    <mat-form-field appearance="fill" fxFlex="100" fxFlex.gt-sm="50">
      <mat-label>{{"ROLES.COMMENT" | translate}}</mat-label>
      <input matInput formControlName="comment" data-test="comment-input">
    </mat-form-field>
  </div>

  <!-- Permissions -->
  <div fxLayout="column" fxFlex>
    <h2 mat-dialog-title>{{"ROLES.PERMISSIONS" | translate}}</h2>
    <!-- Endpoints -->
    <mat-form-field appearance="fill" fxFlex="100">
      <div fxLayout="row" fxFlex fxLayoutGap="16px">
        <span>{{"ROLES.ENDPOINTS_PERMISSIONS" | translate}}</span>
        <mat-checkbox [formControl]="form.get('endpointsPermissions').value.read">{{"ROLES.READ" | translate}}</mat-checkbox>
      </div>
    </mat-form-field>
  </div>
</form>

CodePudding user response：

This works now (thanks to 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>