The use with angular material

[dev054]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

I'm trying to use this lib with angular material components/directives (matInput, mat-select, etc.) but I'm getting an undesired behavior...

... note that in the example above it's rendering the error message inside input.

Expected behavior

I want know if it's possible to use it with angular material and if so, a minimal documentation on how to use would be great.

Minimal reproduction of the problem with instructions

Try to use it with angular material components/directives.

Environment

Angular version: 10.x

[NetanelBasal]

Check the controlErrorAnchor input.

[Wykks]

Unfortunately that's not enough.
I tried with something like this:

export function anchorMatErrorComponent(hostElem: Element, errorElem: Element) {
    const container = hostElem
        .closest('.mat-form-field-wrapper')
        ?.querySelector('.mat-form-field-subscript-wrapper > div');
    container?.insertAdjacentElement('beforeend', errorElem);
    return () => {
        let errorNode = container?.querySelector('mat-error');
        if (errorNode) {
            errorNode.remove();
        }
    };
}

Putting aside the fact that it's not very pretty, it doesn't 'trigger' mat-error animation and custom positioning handled (I guess) in mat-form-field.

Welp, once again, material is not very friendly with custom stuff.

[jogelin]

My personal implementation:

          <form [formGroup]="formGroup" errorTailor>
            <mat-form-field>
              <mat-label>Name</mat-label>
              <input matInput formControlName="name" name="name" type="text" [controlErrorAnchor]="nameError" />
              <mat-error><ng-template controlErrorAnchor #nameError="controlErrorAnchor"></ng-template></mat-error>
            </mat-form-field>
          </form>

[nerumo]

I experience the same problems as @Wykks. For material it would need a different approach, more like suggested here: https://stackoverflow.com/a/58566061

I made a quick search and stumbled on this lib: https://www.npmjs.com/package/ngx-mat-errors

[Tre665]

Hello,
not sure if I should create an own issue for our problem (if so please let me know). But it is also related to the usage with the material library so I thought I add it here first.

We are using the same approach like @jogelin for matInput fields and there it works perfect.
Now we wanted to add an error to a mat-select form field and there it seems that the approach don't work.
At least not with the regular mat-select the version. The native select version with matNativeControl seems to work fine. Unfortunately we can't use that approach due to other requirements

Here the error doesn't shown (also not added to the DOM)

<form [formGroup]="form" errorTailor>
    <div class="form-group">
        <mat-form-field appearance="outline">
        <mat-select formControlName="animal" class="form-control" [controlErrorAnchor]="anchorAnimal">
            <mat-option [value]="null">- -</mat-option>
            <mat-option *ngFor="let option of options; index as index" [value]="option">
            {{ option.label }}
            </mat-option>
        </mat-select>
        <mat-error>
            <ng-template
            controlErrorAnchor
            #anchorAnimal="controlErrorAnchor"
            ></ng-template>
        </mat-error>
        </mat-form-field>
    </div>
</form>

This does work

<form [formGroup]="form" errorTailor>
    <div class="form-group">
        <mat-form-field appearance="outline">
          <select formControlName="animal" class="form-control" [controlErrorAnchor]="anchorAnimal" matNativeControl>
            <option [value]="null">- -</option>
            <option *ngFor="let option of options; index as index" [value]="option">
              {{ option.label }}
            </option>
          </select>
          <mat-error>
            <ng-template
              controlErrorAnchor
              #anchorAnimal="controlErrorAnchor"
            ></ng-template>
          </mat-error>
        </mat-form-field>
      </div>
</form>