是一个Angular Directive，用于在角度组件上创建包装器，并用于应用下划线，粗体，提示等文本样式。

可以在中使用以下角度分量。

• <输入matNativeControl>

• </p> </li> <li> <p> <选择matNativeControl></p> </li> <li> <p> <垫选></p> </li> <li> <p> <mat-chip-list></p> </li> </ul> <p>在本章中，我们将展示在Angular Material中使用垫形字段控件所需的配置。</p> <h2>创建角度应用</h2> <p>请按照以下步骤更新我们在<i>Angular 6-Project Setup</i>一章中创建的Angular应用<i>程序</i>–</p> <table class="table"> <tr> <th style="text-align:center;">Step</th> <th style="text-align:center;">Description</th> </tr> <tr> <td class="ts">1</td> <td>Create a project with a name <i>materialApp</i> as explained in the <i>Angular 6 – Project Setup</i> chapter.</td> </tr> <tr> <td class="ts">2</td> <td>Modify <i>app.module.ts</i>, <i>app.component.ts</i>, <i>app.component.css</i> and <i>app.component.html</i> as explained below. Keep rest of the files unchanged.</td> </tr> <tr> <td class="ts">3</td> <td>Compile and run the application to verify the result of the implemented logic.</td> </tr> </table> <p>以下是修改后的模块描述符<b>app.module.ts的内容</b>。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup">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 { } </code></pre> </div> <p>以下是修改后的CSS文件<b>app.component.css的内容</b>。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup">.tp-container { display: flex; flex-direction: column; } .tp-container > * { width: 100%; } </code></pre> </div> <p>以下是修改后的HTML主机文件<b>app.component.html的内容</b>。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><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"> A B C