template-driven form
template-driven form
جدول المصطلحات:
مقدمة:
بيئة عمل انغلر تقدم نوعين من forms النوع الأول والذي سنتكلم عنه هنا هو template-driven form أما النوع الثاني فاسمه reactive form
الفرق بالمختصر انه بالنوع الأول يكون إعداد الفورم وما يخصه موجود بملف HTML الخاص بالكومبوننت التي تحوي الفورم أما بالنوع الثاني فالاعداد يكتب بملف الtypescript وما يكتب HTML هو شكل الفورم فقط
الخطوات السليمة لبناء الفورم:
بناء كلاس يحوي شكل البيانات التي سيحصل عليها الفورم، على سبيل المثال:
export class Hero {
constructor(
public id: number,
public name: string,
public power: string,
public alterEgo?: string
) { }
}
كتابة التفاصيل اللازمة داخل ملف ال typescript على سبيل المثال:
import { Component } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html',
styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {
powers = ['Really Smart', 'Super Flexible', 'Super Hot'];
model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
submitted = false;
onSubmit() { this.submitted = true; }
}
ملاحظة:
هنا قمنا باضافة بيانات غير حقيقية ( في مشروع حقيقي يمكن تضمين البيانات ونوعها من service المراد عمل form للاضافة على محتوى بياناتها)
تفعيل ميزة اضافة template-driven form عن طريق إدخال FormsModule من @angular/forms الى مصفوفة imports بالمودل الاب (او ب app.module ليكون فعال ضمن كامل المشروع) بالشكل:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule
],
declarations: [
AppComponent,
HeroFormComponent
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
البدء باستخدام الفورم عن طريق التاغ المعرف له بالشكل
<app-hero-form></app-hero-form>
استخدام tags الـ HTML الخاصة بالفورم مثل input, select, button.. الخ
على سبيل المثال:
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
عمل binding للبيانات عن طريق استخدام ngModel بالشكل:
<input
type="text"
class="form-control"
id="name"
required
[(ngModel)]="model.name"
name="name"
/>
للوصول بشكل عام الى حالة الفورم نقوم بالتالي:
<form #heroForm="ngForm"></form>
معلومات مفيدة:
يمكن معرفة حالة الكنترول عن طريق بعض الclasses مثل ng-touched, ng-dirty, ng-valid
ليست هناك تعليقات: