کنترل Input در انگولار متریال ۷
<mat-input> یک دستورالعمل انگولار است که به منظور ایجاد کنترل های <input> و <textarea> در داخل کنترل <mat-form-field> استفاده می شود.
این کنترل می تواند نوع های زیر را داشته باشد:
- color
- date
- datetime-local
- month
- number
- password
- search
- tel
- text
- time
- url
- week
در این بخش چگونگی ایجاد و استفاده از یک <mat-input> در انگولار را بررسی خواهیم کرد.
ایجاد برنامه انگولار
در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat- input> تغییر می دهیم.
محتوای فایل 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} 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:
1 2 3 4 5 6 7 8 | .tp-form { min-width: 150px; max-width: 500px; width: 100%; } .tp-full-width { width: 100%; } |
محتوای فایل app.component.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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 یک Form Field ایجاد کرده ایم.
- سپس با استفاده از input و خاصیت matInput یک کنترل به Form Field اضافه کرده ایم.
هیچ نظری ثبت نشده است