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

  • چهارشنبه ۲۷ اسفند ۱۳۹۹
  • بازدید ۱۸۸ نفر

angular material 7 input 6359 تصویر

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

<mat-input> یک دستورالعمل انگولار است که به منظور ایجاد کنترل های <input> و <textarea> در داخل کنترل <mat-form-field> استفاده می شود.

این کنترل می تواند نوع های زیر را داشته باشد:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • password
  • search
  • tel
  • text
  • time
  • url
  • week

در این بخش چگونگی ایجاد و استفاده از یک <mat-input> در انگولار را بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat- input> تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

محتوای فایل app.component.css:

محتوای فایل app.component.ts:

محتوای فایل app.component.html:

نتیجه

بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:

angular material 7 input 6359 1 تصویر

جزئیات

  • در ابتدا ما با استفاده از mat-form-field یک Form Field ایجاد کرده ایم.
  • سپس با استفاده از input و خاصیت matInput یک کنترل به Form Field اضافه کرده ایم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است