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

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

angular material 7 form field 6356 تصویر

کنترل 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 را مانند نمونه زیر تغییر دهید:

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

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

نتیجه

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

angular material 7 form field 6356 1 تصویر

جزئیات

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

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