mat-error not showing

[rohanrichards]

I am testing this with a reactive form and when using Validators.required the <mat-error> directive is not showing. This issue is also visible on the demo page under the Input with validation: required and maxSize sub section: https://merlosy.github.io/ngx-material-file-input/ (note that the mat-error fields never actually show up, try opening the dialog then closing without selecting a file, it should show the required error, but does not)

my code currently template:

<mat-form-field>
    <ngx-mat-file-input formControlName="image"
        placeholder="Required input"
        valuePlaceholder="No file selected"
        required></ngx-mat-file-input>
    <mat-icon matSuffix>folder</mat-icon>
    <mat-error *ngIf="topicForm.get('image').hasError('required')">
        Image is <strong>required</strong>
    </mat-error>
</mat-form-field>

component:

topicForm = new FormGroup({
    image: new FormControl('', [Validators.required])
});

I have tried this alternative method of getting errors: *ngIf="topicForm.hasError('required', ['image'])" (note the path variable)

My other inputs on the same form use an ErrorStateMatcher defined like this:

export class MyErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
    }
}

However <ngx-mat-file-input> cannot bind an errorStateMatcher. I don't know why form fields need errorStateMatchers now, and I'm not sure if its to do with the fact I use AngularMaterial or if it's to do with a new version of Angular.

[merlosy]

Did you set on your form tag:

<form [formGroup]="topicForm" novalidate>

As far as I can tell, It is working on the example provided under Input with validation: required and maxSize (on MacOS High Sierra, Chrome version 70). It does show an error.

On the other hand, I'm not using any custom ErrorStateMatcher.

[rohanrichards]

EDIT: Can confirm this is working for me on Chrome. Will test in a private window on FF to see if its plugin related

EDIT2: Can't get it to work on FF at all

Can you show me the mat-error displaying in the example? I'm testing this on Firefox, and cannot view the mat-error fields https://imgur.com/Ayb5BVD The error state is working (its red), but no mat-error block is visible. My form is properly configured and I have other inputs working as expected

        <form [formGroup]="topicForm"
            fxLayout="column"
            novalidate>

My live site, showing missing mat-error field: https://imgur.com/GviaLjm

[merlosy]

Can you detail the version of Firefox you are using, and if you have any active extension that could be interfering

[merlosy]

I'll try to look into later

[rohanrichards]

I disabled all extensions and used a private window. Firefox version: 63.0.3 (64-bit) I used ngx-rocket scaffolding to start the project and Angular Material for the front-end components. relevant package.json section

    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.0.1",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/flex-layout": "7.0.0-beta.19",
    "@angular/forms": "^7.0.0",
    "@angular/http": "^7.0.0",
    "@angular/material": "^7.0.1",

If there's any more information I can provide please don't hesitate to ask. Thank you for looking into this.

[yglodt]

Info as of June 2019:

The error shows up as expected in Chrome, so no problem there.

In Firefox however, it only shows up after the second time you open and cancel a file-open dialog.