Skip to content

Update to Angular 18

Compare
Choose a tag to compare
@daemons88 daemons88 released this 02 Jun 12:40
· 15 commits to main since this release

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