Angular Material 7 输入
<mat-input>用于<input>和<textarea>元素在<mat-form-field> 下工作。
<mat-input>中可以使用以下输入类型。
color
date
datetime-local
email
month
number
password
search
tel
text
time
url
week
在本章我们将展示在Angular Material中使用mat-input 控件所需的配置。
创建 Angular 应用
按照以下步骤创建应用程序
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} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
下面是app.component.css的内容:
.tp-form { min-width: 150px; max-width: 500px; width: 100%; } .tp-full-width { width: 100%; }
下面是app.component.ts的内容:
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, ]); }
下面是app.component.html的内容:
<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"></textarea> </mat-form-field> <mat-form-field class = "tp-full-width"> <input matInput 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>
结果
细节
首先,我们使用mat-form-field包装器创建了一个表单字段。
然后,使用输入和匹配输入属性将表单控件添加到表单字段中。