Update to Angular 18
The library was updated to Angular 18, and was added a new validator to validate using mime types: acceptedMimeTypes
, this can be used like this:
ts
export class AppComponent {
private readonly validFileTypes = ['image/jpeg', 'image/png'];
constructor(private formBuilder: FormBuilder) {
this.demoForm = this.formBuilder.group({
basicfile: [
'',
[
Validators.required,
FileValidator.acceptedMimeTypes(this.validFileTypes),
],
],
});
}
get basicfile() {
return this.demoForm.get('basicfile');
}
}
html
<form [formGroup]="demoForm">
<mat-form-field>
<mat-label>Basic input file</mat-label>
<ngx-mat-file-input
#fileInput
formControlName="basicfile"
></ngx-mat-file-input>
<button
mat-icon-button
matSuffix
*ngIf="!fileInput.empty"
(click)="fileInput.clear($event)"
>
<mat-icon>clear</mat-icon>
</button>
<mat-icon matSuffix *ngIf="fileInput.empty">folder</mat-icon>
<mat-error *ngIf="this.basicfile?.hasError('acceptedMimeTypes')">
<p>Accepted MIME types: {{ this.basicfile?.getError("acceptedMimeTypes").validTypes.join(', ') }}</p>
</mat-error>
</mat-form-field>
</form>
The complete example is here