کنترل Form Field در انگولار متریال 7 – آموزش انگولار متریال

کنترل Form Field در انگولار متریال 7

یک دستورالعمل انگولار است که به عنوان یک wrapper برای سایر کامپوننت و برای اعمال استایل هایی بر روی متن مانند underline،bold ،  hintsو غیره استفاده می شود.

در زیر کامپوننت هایی را که می توانند در درون قرار گیرند را مشاهده می کنید:

• </li> <li><select matNativeControl></li> <li><mat-select></li> <li><mat-chip-list></li> </ul> <p style="text-align: justify;">در این بخش چگونگی ایجاد و استفاده از یک <span class=codespan dir=ltr><mat-form-field></span> در انگولار را بررسی خواهیم کرد.</p> <h3 style="text-align: justify;"><span class=h3_titr_style><strong>ایجاد برنامه انگولار</strong></span></h3> <p style="text-align: justify;">در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <span class=codespan dir=ltr><mat-form-field></span> تغییر می دهیم.</p> <p style="text-align: justify;">محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:</p> <p></p> <div id=crayon-67d07293a784c320233116 class="crayon-syntax crayon-theme-github crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; float: left; font-size: 12px !important; line-height: 25px !important;"> <div class=crayon-plain-wrap><textarea wrap=soft class="crayon-plain print-no" data-settings readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 25px !important;"> 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 { }