'mat-form-field' не является известным элементом: 1. Если 'mat-form-field' является угловым компонентом, то убедитесь, что он является частью этого модуля.

Question

Я пытался манипулировать статьями, чтобы использовать материал Angular, но все же тщетно. Каждый раз, когда я включаю любой ввод mat, я получаю сообщение об ошибке, хотя я уже импортировал все его зависимости. вот компонент, в котором существует мой код

<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

Попробуйте импортировать следующее в app.module

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

и добавить это в @NgModule

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Answer 2

Вы должны импортировать FormsModule и ReactiveFormsModule из @angular/forms.