< 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应用程序
按照以下步骤更新我们在 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 .
sentiment_very_satisfied Sample Hint A B C
结果
验证结果.
详细信息
首先,我们使用mat-form-field包装器创建了一个表单字段.我们已使用外观属性更改了表单字段的外观.
然后,表单控件将添加到表单字段中.