< mat-form-field> ,一个Angular Directive,用于创建角度组件的包装器,用于应用下划线,粗体,提示等文本样式.
以下角度分量可以在< mat-form-field> 中使用.
< input matNativeControl>
< textarea matNativeControl>
< select matNativeControl>
< mat-select>
< mat-chip-list>
在本章中,我们将展示使用mat-form-field所需的配置Angular Material中的控件.
按照以下步骤更新我们在 Angular 6中创建的Angular应用程序 - 项目设置章 :
步骤 | 描述 |
---|---|
1 | 创建一个名为的项目materialApp ,如 Angular 6 - Project Setup 章节中所述. |
2 | 修改 app.module.ts , app.component.ts , app.component. css 和 app.component.html ,如下所述.保持其余文件不变. |
3 | 编译并运行应用程序以验证实现的逻辑的结果. |
以下是修改后的模块描述符的内容 app.module.ts .
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatInputModule,MatOptionModule, MatSelectModule, MatIconModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatInputModule,MatOptionModule, MatSelectModule, MatIconModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
以下是修改后的CSS文件的内容 app.component.css .
.tp-container { display: flex; flex-direction: column; } .tp-container > * { width: 100%; }
以下是修改过的HTML主机文件的内容 app.component.html .
<div class = "tp-container"> <mat-form-field appearance = "standard"> <input matInput placeholder = "Input"> <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> <mat-hint>Sample Hint</mat-hint> </mat-form-field> <mat-form-field appearance = "fill"> <textarea matInput placeholder = "Textarea"></textarea> </mat-form-field> <mat-form-field appearance = "outline"> <mat-select placeholder = "Select"> <mat-option value = "A">A</mat-option> <mat-option value = "B">B</mat-option> <mat-option value = "C">C</mat-option> </mat-select> </mat-form-field> </div>
验证结果.
首先,我们使用mat-form-field包装器创建了一个表单字段.我们已使用外观属性更改了表单字段的外观.
然后,表单控件将添加到表单字段中.