Angular Material 7 表单
<mat-form-field>用于创建Angular组件的封装,例如应用下划线、粗体、提示等文本样式。
下面是<mat-form-field>的用法:
<input matNativeControl>
<textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>
在本章中,我们将展示在Angular Material中使用mat-form-field所需的配置。
创建Angular应用
按照以下步骤创建的Angular Material应用程序
1.创建一个名为materialApp的项目。
2.修改app.module.ts, app.component.ts, app.component.css and app.component.htmls。保持其余文件不变。
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 { }
下面是修改后的app.component.css.
.tp-container { display: flex; flex-direction: column; } .tp-container > * { width: 100%; }
下面是修改后的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包装器创建了一个表单字段。我们已经使用外观属性更改了表单域的外观。
然后,将表单控件添加到表单域中。