如何解决无法使用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
我希望它会对其他一些人有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。