Angular mat-form-field/mat-label 问题

Question

I started learning Angular Materials, and I have a problem with adding example from their site.

To my html file I added:

        <mat-form-field class="example-form-field">
          <mat-label>Clearable input</mat-label>
          <input matInput type="text" [(ngModel)]="value">
          <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
            <mat-icon>close</mat-icon>
          </button>
        </mat-form-field>

And I have got few errors: 'mat-form-field' is not a known element:

1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress

My app.module.ts file:

import {MatInputModule} from '@angular/material/input';
import {Component} from '@angular/core';
import { NgModule} from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { BrowserModule } from '@angular/platform-browser';
import { MatRippleModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon'
import {MatButtonModule} from '@angular/material/button';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule ({

  schemas: [CUSTOM_ELEMENTS_SCHEMA],

  imports: [
    MatSlideToggleModule,
    BrowserModule,
    FormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatRippleModule
  ]
})
class AppModule {}
@Component({
  selector: 'input-clearable-example',
  templateUrl: './okno_testowe.html',
  styleUrls: ['./log.css'],
})
export class InputClearableExample {
  value = 'Clear me';
}

and css:

.example-form-field {
    width: 200px;
  }

What could be the problem here? I assume I made some simple mistake because I am just taking my first steps with these technologies

Answer 1

• You need to bootstrap the InputClearableExample component, this will be the component that will render the initial content of the app
• Add the InputClearableExample component in the declarations array
• schemas: [CUSTOM_ELEMENTS_SCHEMA], is not required
• Also add BrowserAnimationsModule, Angular material requires this module

@NgModule ({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatRippleModule
  ],
  declarations: [InputClearableExample],
  bootstrap: [InputClearableExample],
})
export class AppModule {}