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

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

یک دستورالعمل انگولار است که به منظور ایجاد کنترل های و </span> در داخل کنترل <span class=codespan dir=ltr><mat-form-field></span> استفاده می شود.</p> <p style="text-align: justify;">این کنترل می تواند نوع های زیر را داشته باشد:</p> <ul style="text-align: justify;"> <li>color</li> <li>date</li> <li>datetime-local</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 style="text-align: justify;">در این بخش چگونگی ایجاد و استفاده از یک <span class=codespan dir=ltr><mat-input></span> در انگولار را بررسی خواهیم کرد.</p> <h3 style="text-align: justify;"><span class=h3_titr_style><strong>ایجاد برنامه انگولار</strong></span></h3> <p style="text-align: justify;">در ادامه برنامه ای که در بخش <a href=https://sourcesara.com/angular7-project-setup/ >ایجاد پروژه در انگولار</a> ایجاد کرده بودیم را برای استفاده از کنترل <span class=codespan dir=ltr><mat- input></span> تغییر می دهیم.</p> <p style="text-align: justify;">محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:</p> <p></p> <div id=crayon-67d073d5d5848778249347 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} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }