无法使用ngx-mat-file-input

问题描述

我正在使用Angular 10和Angular Materiel创建一些表格。我尝试了NGX Angular Material库，因为它是唯一包含与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() { }
}

出现此错误：

screenshot of the console navigator

解决方法

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

}

您可以检查一些示例并将其与之进行比较，这是您要完成的任务example的叠代。

,

编辑： 我解决了我的问题，但现在我不知道为什么它没有像以前那样起作用。 对于可能遇到此问题的用户，我的解决方案是创建一个MaterialModule，可以在AppModule中导入和导出。看起来像这堆闪电战，但是在导出模块中也有一个AppMaterialModule：https://stackblitz.com/edit/material-file-input?file=src%2Fapp%2Fapp.module.ts

我希望它会对其他一些人有所帮助。