Vật liệu góc 7 - Trường biểu mẫu

Các <mat-form-field>, một Chỉ thị Angular, được sử dụng để tạo một trình bao bọc trên các thành phần góc cạnh và được sử dụng để áp dụng các kiểu văn bản như gạch dưới, in đậm, gợi ý, v.v.

Thành phần góc sau có thể được sử dụng trong <mat-form-field>.

• <input matNativeControl>

• <textarea matNativeControl>

• <select matNativeControl>

• <mat-select>

• <mat-chip-list>

Trong chương này, chúng tôi sẽ giới thiệu cấu hình cần thiết để sử dụng điều khiển trường mat-form trong Angular Material.

Tạo ứng dụng Angular

Làm theo các bước sau để cập nhật ứng dụng Angular mà chúng tôi đã tạo trong Angular 6 - chương Thiết lập dự án -

Bươc	Sự miêu tả
1	Tạo một dự án với tên materialApp như được giải thích trong chương Angular 6 - Project Setup .
2	Sửa đổi app.module.ts , app.component.ts , app.component.css và app.component.html như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi.
3	Biên dịch và chạy ứng dụng để xác minh kết quả của logic được triển khai.

Sau đây là nội dung của bộ mô tả mô-đun đã sửa đổi 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 { }

Sau đây là nội dung của tệp CSS đã sửa đổi app.component.css.

.tp-container {
   display: flex;
   flex-direction: column;
}
.tp-container > * {
   width: 100%;
}

Sau đây là nội dung của tệp máy chủ HTML đã sửa đổi 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>

Kết quả

Xác minh kết quả.

Chi tiết

• Đầu tiên, chúng tôi đã tạo một trường biểu mẫu bằng cách sử dụng trình bao bọc trường biểu mẫu. Chúng tôi đã thay đổi giao diện của trường biểu mẫu bằng cách sử dụng thuộc tính ngoại hình.

• Sau đó, một điều khiển biểu mẫu được thêm vào trường biểu mẫu.