Блог

Я использую Angular 10 и Angular Materiel для создания некоторых форм. Я попробовал библиотеку материалов NGX Angular, потому что это единственная, которая содержит файловый ввод, совместимый с Angular Material. Итак, я установил библиотеку, импортировал ее в свой модуль приложения, но, похоже, я не могу использовать html-тег ngx-mat-file-input. Можете ли вы дать ответ на мою проблему? Спасибо!

html-файл :

   <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-файл :

 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() { }
}
  

И появляется эта ошибка :

скриншот консольного навигатора

Ваш AppModule и HTML, похоже, в порядке. Я думаю, проблема здесь в том, как вы инициализируете саму форму. Я бы рекомендовал вам внести следующие изменения в ваш TS-файл:

файл TypeScript :

 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');
  }

}
  

Есть несколько примеров, с которыми вы могли бы проверить и сравнить свой код, вот пример stackblitz того, чего вы пытаетесь достичь.

РЕДАКТИРОВАТЬ: Я решил свою проблему, но теперь я не понимаю, почему это не сработало так, как я делал раньше. Для тех, у кого может возникнуть эта проблема, мое решение заключается в создании MaterialModule, который я могу импортировать и экспортировать в моем AppModule. Это похоже на этот stackblitz, но с AppMaterialModule также в модуле экспорта :https://stackblitz.com/edit/material-file-input?file=src/app/app.module.ts

Я надеюсь, что это поможет некоторым другим ребятам.