Question

我一直在尝试摆弄文章以使用Angular材质，但仍然徒劳。每次我包含所有mat-input时，都会得到一个错误，即使我已经导入了所有依赖。这是我的代码所在的组件

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="Favorite food" value="Sushi">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <textarea matInput placeholder="Leave a comment"></textarea>
    </mat-form-field>
</form>

这是我的app.module.ts。您可以看到我已经导入了所有相关的依赖项，但是它给了我错误

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
// import { MatButtonModule } from '@angular/material/button';
import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import 'hammerjs';

import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';

import { fuseConfig } from 'app/fuse-config';

import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
import { SampleModule } from 'app/main/sample/sample.module';
import { AddSalesPersonComponent } from './layout/add-sales-person/add-sales-person.component';

const appRoutes: Routes = [
    {
        path: 'addSalesPerson',
        component: AddSalesPersonComponent
    },
    {
        path: '**',
        redirectTo: 'sample'
    }
];

@NgModule({
    declarations: [
        AppComponent,
AddSalesPersonComponent 
    ],
    imports: [
        BrowserModule,
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,
        BrowserAnimationsModule,
        HttpClientModule,
        RouterModule.forRoot(appRoutes),

        TranslateModule.forRoot(),

        // Material moment date module
        MatMomentDateModule,

        // Material
        MatButtonModule,
        MatIconModule,

        // Fuse modules
        FuseModule.forRoot(fuseConfig),
        FuseProgressBarModule,
        FuseSharedModule,
        FuseSidebarModule,
        FuseThemeOptionsModule,

        // App modules
        LayoutModule,
        SampleModule
    ],
    exports: [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,

    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

Answer 1

您必须从FormsModule导入ReactiveFormsModule和@angular/forms。

Answer 2

尝试在app.module中导入以下内容

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

并将其添加到@NgModule

schemas: [CUSTOM_ELEMENTS_SCHEMA]

“ mat-form-field”不是已知元素：1.如果“ mat-form-field”是Angular组件，则请验证它是否属于此模块

2 个答案: