Can not use ngx-mat-file-input

Question

I am using Angular 10 and Angular Materiel to create some forms. I tried the NGX Angular Material library because it's the only one which contains a file input compatible with Angular Material. So I installed the library, imported it in my app module but it seems that I can't use the html tag ngx-mat-file-input. May you have the answer to my problem? Thanks !

html file:

  <form [formGroup]="xxxForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <ngx-mat-file-input formControlName="basicfile" placeholder="Basic Input" ></ngx-mat-file-input>
      <mat-icon matSuffix>folder</mat-icon>
    </mat-form-field>
  </form>

ts file:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Validators, FormBuilder, FormControl, CheckboxRequiredValidator, FormGroup } from '@angular/forms';
import { FileInput } from 'ngx-material-file-input';
@Component({
  selector: 'app-confirmation-retour',
  templateUrl: './confirmation-retour.component.html',
  styleUrls: ['./confirmation-retour.component.scss']
})
export class ConfirmationRetourComponent implements OnInit, OnDestroy {

  xxxForm = this.fb.group({
    basicfile: ['', [Validators.required]],
    });

  constructor(private fb: FormBuilder,) {
  }

  ngOnInit() {
  }

  ngOnDestroy() {
  }

  onSubmit() {
    console.log('hello');
  }

}

app.module.ts:

import { MaterialFileInputModule } from 'ngx-material-file-input';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RetoursComponent } from './retours.component';
import { CommandesComponent } from './commandes.component';
import { ConfirmationRetourComponent } from './confirmation-retour.component';

@NgModule({
    declarations: [
        RetoursComponent,
        CommandesComponent,
        ConfirmationRetourComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        HttpClientModule,
        FormsModule,
        MatFormFieldModule,
        MatSelectModule,
        MatInputModule,
        MaterialFileInputModule,
        ReactiveFormsModule, 
    ],
    exports: [],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor() { }
}

And it appears this error:

screenshot of the console navigator

Answer 1

Your AppModule and HTML seems to be fine. I think the problem here is how you are initializing the form itself. I would recommend you doing the following changes in your TS file:

TypeScript file:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Validators, FormBuilder, FormControl, CheckboxRequiredValidator, FormGroup } from '@angular/forms';
import { FileInput } from 'ngx-material-file-input';
@Component({
  selector: 'app-confirmation-retour',
  templateUrl: './confirmation-retour.component.html',
  styleUrls: ['./confirmation-retour.component.scss']
})
export class ConfirmationRetourComponent implements OnInit, OnDestroy {

  xxxForm: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
  xxxForm = this.fb.group({
    basicfile: ['', [Validators.required]],
    });
  }

  ngOnDestroy() {
  }

  onSubmit() {
    console.log('hello');
  }

}

There a few examples you could check and compare your code to, here is a stackblitz example of what you are trying to accomplish.

Answer 2

EDIT: I solved my problem but I don't realy now why it didn't work as I did before. To those who might have this problem, my solution is to create a MaterialModule that I can import and export in my AppModule. It looks like this stackblitz but with an AppMaterialModule also in the exports module: https://stackblitz.com/edit/material-file-input?file=src%2Fapp%2Fapp.module.ts

I hope it will help some other guys.