是一个角度指令，用于和元素在<b><mat-form-field>下工作</b>。</p> <p>在<b><mat-input>中</b>可以使用以下输入类型。</p> <ul class="list"> <li>颜色</li> <li>日期</li> <li>本地日期时间</li> <li>电子邮件</li> <li>月</li> <li>数</li> <li>密码</li> <li>搜索</li> <li>电话</li> <li>文本</li> <li>时间</li> <li>网址</li> <li>周</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} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatInputModule, 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-form { min-width: 150px; max-width: 500px; width: 100%; } .tp-full-width { width: 100%; } </code></pre> </div> <p>以下是修改后的ts文件<b>app.component.ts的内容</b>。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup">import { Component } from '@angular/core'; import { FormControl } from "@angular/forms"; import {Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'materialApp'; emailFormControl = new FormControl('', [ Validators.required, Validators.email, ]); } </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"><form class="tp-form"> <mat-form-field class="tp-full-width"> <input matinput="" placeholder="Favorite Food" value="Pasta"> </mat-form-field> <mat-form-field class="tp-full-width"> <textarea matinput="" placeholder="Enter your comment"> Please enter a valid email address Email is required