کنترل Form Field در انگولار متریال ۷
<mat-form-field> یک دستورالعمل انگولار است که به عنوان یک wrapper برای سایر کامپوننت و برای اعمال استایل هایی بر روی متن مانند underline،bold ، hintsو غیره استفاده می شود.
در زیر کامپوننت هایی را که می توانند در درون <mat-form-field> قرار گیرند را مشاهده می کنید:
- <input matNativeControl>
- <textarea matNativeControl>
- <select matNativeControl>
- <mat-select>
- <mat-chip-list>
در این بخش چگونگی ایجاد و استفاده از یک <mat-form-field> در انگولار را بررسی خواهیم کرد.
ایجاد برنامه انگولار
در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat-form-field> تغییر می دهیم.
محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 { } |
محتوای فایل app.component.css:
1 2 3 4 5 6 7 | .tp-container { display: flex; flex-direction: column; } .tp-container > * { width: 100%; } |
محتوای فایل app.component.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
نتیجه
بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:
جزئیات
- در ابتدا ما با استفاده از mat-form-field یک Form Field ایجاد و ظاهر هر کدام را با استفاده از خاصیت appearance تنظیم کرده ایم.
- سپس یک کنترل مربوط به فرم به هر کدام اضافه کرده ایم.
هیچ نظری ثبت نشده است