directive: add support for nested groups

[carlo-nomes]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/ngx-form-errors/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Currently messages are stored as {group?}.{formControlName?}.{error} meaning an error can only be specified for it's nearest group. I propose we allow nesting groups so the format will be {[group]?}.{formControlName?}.{error}.

[SuperITMan]

Could you please provide some examples of what you have in mind ? 😊

[carlo-nomes]

Yes, sorry I had some difficulty explaining. 😅
Lets say you have a form like this:

<form>
  <div ngxFormErrorsGroup="register-group">
    <input formControlName="userName" />
    <div ngxFormErrorsGroup="password-group">
      <input formControlName="password" />
      <input formControlName="repeatPassword" />
    </div>
  </div>
</form>

and your config:

const errorMessages = {
  required: "This is required",
  "register-group": {
    required: "Field is required for registering",
    "password-group": {
      passwordRepeat: {
        required: "Please validate your password"
      }
    }
  }
};

The error message for register-group.password-group.password will fall back to "Field is required for registering" in stead of "This is required".

[bernardthibaut]

To support nested groups I don't think we need to add anything to the logic, but changing the type of the directive in the constructor would make it possible.

Changing _form: FormGroupDirective to _form: ControlContainer in the form-errors.directive.ts file makes the component use the nested formGroup instead of the main group. For example, there is a main group called formGroup, containing another formGroup address which contains a FormControl street. With FormGroupDirective it throws an error but with ControlContainer it correctly uses the address formGroup instead of the main formGroup.

<form [formGroup]="formGroup">
  <div formGroupName="address">
	<mat-form-field>
		<input matInput type="text" formControlName="street" />
		<mat-error>
			<ng-template ngxFormErrors="street"></ng-template>
		</mat-error>
	</mat-form-field>
  </div>
</form>