The <垫输入> ，一个 Angular 指令，用于 和 元素在其下工作 <b> <mat-form-field> </b> . </p> <p> 以下输入类型可用于 <b> <垫输入> </b> . </p> <ul class="list"> <li> color </li> <li> date </li> <li> 本地日期时间 </li> <li> email </li> <li> month </li> <li> number </li> <li> password </li> <li> search </li> <li> tel </li> <li> text </li> <li> time </li> <li> url </li> <li> week </li> </ul> <p> 在本章中，我们将展示在 Angular Material 中使用 mat-input 控件所需的配置。 </p> <h2> 创建 Angular 应用程序 </h2><hr> <p> 按照以下步骤更新我们在其中创建的 Angular 应用程序 Angular 6 - 项目设置 chapter： </p> <table class="table table-bordered"> <tbody> <tr class="firstRow"> <th style="word-break: break-all;"> 步骤 </th> <th style="word-break: break-all;"> 描述 </th> </tr> <tr> <td valign="top" style="word-break: break-all;"> 1 </td> <td valign="top" style="word-break: break-all;"> 创建一个有名字的项目 材料应用 正如在 Angular 6 - 项目设置 chapter. </td> </tr> <tr> <td valign="top" style="word-break: break-all;"> 2 </td> <td valign="top" style="word-break: break-all;"> Modify app.module.ts , app.component.ts , app.component.css and app.component.html 如下所述。保持其余文件不变。 </td> </tr> <tr> <td valign="top" style="word-break: break-all;"> 3 </td> <td valign="top" style="word-break: break-all;"> 编译并运行应用程序以验证实现逻辑的结果。 </td> </tr> </tbody> </table> <p> 以下是修改后的模块描述符的内容 <b> app.module.ts </b> . </p> <pre class="brush:python;toolbar:false">import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {Mat输入Module} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, Mat输入Module, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } </pre> <p> 以下是修改后的 CSS 文件的内容 <b> app.component.css </b> . </p> <pre class="brush:python;toolbar:false">.tp-form { min-width: 150px; max-width: 500px; width: 100%; } .tp-full-width { width: 100%; } </pre> <p> 以下是修改后的ts文件内容 <b> app.component.ts </b> . </p> <pre class="brush:python;toolbar:false">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, ]); } </pre> <p> 以下是修改后的 HTML 主机文件的内容 <b> app.component.html </b> . </p> <pre class="brush:python;toolbar:false"><form class = "tp-form"> <mat-form-field class = "tp-full-width"> <input mat输入 placeholder = "Favorite Food" value = "Pasta"> </mat-form-field> <mat-form-field class = "tp-full-width"> <textarea mat输入 placeholder = "Enter your comment"></textarea> </mat-form-field> <mat-form-field class = "tp-full-width"> <input mat输入 placeholder = "Email" [formControl] = "emailFormControl"> <mat-error *ngIf = "emailFormControl.hasError('email') && !emailFormControl.hasError('required')"> Please enter a valid email address </mat-error> <mat-error *ngIf = "emailFormControl.hasError('required')"> Email is <strong>required</strong> </mat-error> </mat-form-field> </form> </pre> <h2> Result </h2><hr> <p> 验证结果。 </p> <img alt="输入" src="/angular_material7/images/angular_material7_input.jpg"/> <h2> Details </h2><hr> <ul class="list"> <li> <p> 首先，我们使用 mat-form-field 包装器创建了一个表单字段。 </p> </li> <li> <p> 然后，使用 input 和 mat输入 属性将表单控件添加到表单字段。 </p> </li> </ul> <div class="pre-next-nav"> <div class="pre-nav"><a href="https://www.newbiego.com/angular-material7/angular-material7-form-field.html">< 上一篇（Angular Material 7 表单域）</a></div> <div class="next-nav"><a href="https://www.newbiego.com/angular-material7/angular-material7-radio-button.html">下一篇（Angular Material 7 单选按钮） ></a></div> <div style="clear: both;"></div> </div> </div> </div> <div style="clear: both;"></div> <div class="footer"> <p>声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利，请在一个月内通知我们（support@newbiego.com），我们会及时删除。</p> <p>Copyright©小牛教程 2015-2021 <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备15003982号</a></p> </div> </div> <script src="https://asset.newbiego.com/asset/js/syntax-highlighter.js?_ms=b2871607baad20df"></script> <script> SyntaxHighlighter.all(); </script> </body> </html>
