فرمهای برگرفته از مدل یا فرمهای واکنشی(Reactive/Model Driven Forms)

همانطور که قبلا اشاره شد، در فرمهای بر پایه مدل منطق  و یا اصطلاحاً لاجیک فرم به صورت یکسری کلاس در کامپوننت (Component) تعریف می شود و در حقیقت این کلاسها هستن که وظایفی از قبیل اعتبار سنجی را انجام می دهند. همچنین در فرم مبتنی بر مدل کدهای HTML به صورت خودکار تولید نمی شوند و این کار توسط برنامه نویس صورت می پذیرد. در این حالت ابتدا کدهای HTML فرم مورد نظر را  می نویسیم و سپس ارتباط اجزای فرم  به کدهای نوشته شده در کامپوننت مورد نظر را برقرار می کنیم.

جهت آشنائی با مراحل انجام طراحی به فرم مبتنی بر مدل، یک فرم شامل ورودیهای نام، نام خانوادگی، ایمیل، پسورد و زبان با استفاده از bootstrap طراحی میکنیم.

فرم طراحی شده همراه با کدهای مورد نیاز به شرح زیر است :

<form novalidate>

	<fieldset>
		<div class="form-group">
			<label>نام</label>
			<input type="text"
			class="form-control">
		</div>
		<div class="form-group">
			<label>فامیل</label>
			<input type="text"
			class="form-control">
		</div>
	</fieldset>

	<div class="form-group">
		<label>ایمیل</label>
		<input type="email"
		class="form-control">
	</div>

	<div class="form-group">
		<label>رمز ورود</label>
		<input type="password"
		class="form-control">
	</div>

	<div class="form-group">
		<label>زبان</label>
		<select class="form-control">
			<option value="">لطفاً زبان مورد نظر را انتخاب کنید</option>
		</select>
	</div>

</form>

در فرم طراحی شده  استفاده از filedset، دو ورودی نام و نام خانوادگی را به صورت یک گروه دسته بندی می کند. همچنین هنگام معرفی فرم از novalidate استفاده کردیم. در حالت پیش فرض مرورگرها از اعتبارسنجی مخصوص به خود استفاده کرده و در صورت بروز خطا، پیامهای اختصاصی خود را نمایش میدهند. از آنجائی که ما قصد داریم این عمل را طبق میل خود پیاده سازی کنیم، از کلمه novalidate استفاده می کنیم. 

---

فرمهای برگرفته از مدل یا فرمهای واکنشی - لیست پویا

ما در نظر داریم که لیست انتخابی ما، یک لیست پویا از زبانهای قابل انتخاب را نمایش دهد. می توانستیم از تگ <option> جهت اینکار استفاده نمائیم ولی استفاده از لیست پویا اضافه کردن زبانهای بیشتر در زمان اجرا را امکان پذیر می کند. مراحل پیاده سازی لیست پویا به شرح زیر است :

1. یک آرایه از زبانها در کامپوننت تعریف میکنیم :

langs: string[] = [
	'فارسی',
	'انگلیسی',
	'فرانسوی',
	'آلمانی',
	'اسپانیائی'
]

     2. از یک حلقه ngFor جهت نمایش اعضای آرایه در لیست استفاده می کنیم:

<select class="form-control">
	<option value=""> لطفاً زبان مورد نظر را انتخاب کنید </option>
	<option *ngFor="let lang of langs"
		[value]="lang"> ①
		{{lang}} ②
	</option>
</select>

هر انتخاب از یک برچسب (Label) و یک مقدار (value) تشکیل می شود. برچسب متنی است که کاربر مشاهده می کند و مقدار داده ای است که ذخیره خواهد شد. در حقیقت در صورت انتخاب یک برچسب از سوی کاربر، مقدار متناظر با آن ذخیره خواهد شد. جهت تعیین مقدار هر برچسب، با استفاده از [value] لیست انتخابی را به آرایه مورد نظر مرتبط می کنیم.

---

فرمهای برگرفته از مدل یا فرمهای واکنشی - مدل فرم

اجزای اصلی سازنده یک فرم مبتنی بر مدل، FormGroup و FormControl می باشند. جهت آشنائی بیشتر با این اجزا، مدل فرم مورد نظر را به صورت زیر در کامپوننت پیاده سازی می کنیم :

import { FormGroup, FormControl } from '@angular/forms';
.
.
.
class ModelFormComponent implements OnInit {
	myform: FormGroup; ①
	ngOnInit() {
		myform = new FormGroup({
			name: new FormGroup({ ②
				firstName: new FormControl(), ③
				lastName: new FormControl(),
			}),
			email: new FormControl(),
			password: new FormControl(),
			language: new FormControl()
		});
	}
}

1. Myform یک وهله از FormGroup است که فرم مورد نظر را تعریف می کند.
2. FormGroup ها می توانند به صورت شبکه ای داخل یک FormGroup دیگر تعریف شوند.
3. جهت هر کدام از اجزای فرم، می بایست یک FormControl تعریف شود.

هر کنترل کننده فرم در این قالب شامل یک وهله از FormControl می گردد. این خصوصیت وضعیت کنترل از قبیل معتبر بودن، نادرست بودن و حتی مقدار فعلی آنرا به صورت یک مجموعه سازماندهی می کند.

نکته قابل توجه اینجاست که در مثال ما وهله های FormControl درون myform: FormGroup اصلی قرار گرفته اند ولی می توان از FormGroup ها به صورت تودرتو درون FormGroup های دیگر نیز استفاده نمود.

در اینجا ما دو خصوصیت firstName و lastName را در یک FormGroup به نام name در کنار هم قرار داده ایم که خود این خصوصیت نیز درون myform: FormGroup اصلی قرار دارد.

وهله FormGroup همانند FormControl وضعیت کنترل های زیرمجموعه خود را سازماندهی و کنترل می نماید. برای مثال یک وهله FormGroup در صورتی معتبر است که تمامی کنترل های زیر مجموعه آن نیز معتبر باشند. 

---

فرمهای برگرفته از مدل یا فرمهای واکنشی - ارتباط مدل فرم با قالب فرم

حال که ما قالب HTML و همچنین مدل فرم خود را در اختیار داریم زمان آن است که ارتباط این دو را برقرار نمائیم. برای این کار از یکسری directive (راهنما) که در ReactiveFormsModule قرار دارند استفاده می کنیم. پس اجازه دهید تا این ماژول را در NgModule خود تعریف کنیم.

import { ReactiveFormsModule } from '@angular/forms';

formGroup

ابتدا عنصر <form>  را با استفاده از راهنمای formGroup به خصوصیت اصلی یعنی myform به شکل زیر متصل می کنیم :

<form [formGroup]="myform"> ... </form>

حال که ما ارتباط مدل myform را با قالب فرم خود برقرار کرده ایم می توانیم در قالب HTML به مدل myform دسترسی داشته باشیم.

مقدار خصوصیت مدل myform مقادیر کلیه کنترل های زیرمجموعه آنرا به صورت یک شئ سازماندهی می کند. ما میتوانیم با استفاده از لوله (pipe) json اطلاعات مفیدی از فرم خود را در خروجی نمایش دهیم. به این صورت :

<pre>{{myform.value | json}}</pre>

پس از اجرای برنامه مقادیر فرم در تگ pre به صورت زیر نمایش داده می شود :

{
	"name": {
		"firstName": null,
		"lastName": null
	},
"email": null,
"password": null,
"language": null
}

در نگاه اول این امر شگفت انگیز به نظر می رسد ولی با ورود اطلاعات در فیلدهای ورودی در فرم، مدل به روز رسانی نشده و کلیه مقادیر به صورت تهی (null) باقی می مانند. این امر به این دلیل روی می دهد که با وجود برقراری ارتباط عنصر form با مدل myform، هنوز هیچیک از کنترل های فرم در مدل با کنترل های فرم در قالب HTML به صورت خودکار لینک نشده اند. در این قسمت این کار را با استفاده از راهنماهای fromControlName و formGroupName انجام خواهیم داد. formGroupName و formControlName از راهنمای formControlName برای نسبت دادن هر کنترل فرم در قالب HTML به یک کنترل فرم مشخص در مدل به شرح زیر استفاده می شود :

<div class="form-group">
	<label>Email</label>
	<input type="email"
	class="form-control"
	formControlName="email" ①
	required>
</div>

1. این خصوصیت عنصر مورد نظر را به یک کنترل فرم به نام email در مدل اصلی myform متصل می کند. ما همچنین می توانیم با استفاده از راهنمای formGroupName یک گروه از کنترل های فرم قالب را به یک وهله از formGroup در مدل مورد نظر مرتبط کنیم. از آنجائی که کنترل های firstName و lastName تحت یک گروه فرم به نام name سازماندهی شده اند، می توانیم از formGroupName برای این کار استفاده نمائیم. نکته قابل ذکر اینکه در حالت کلی در قالب ما کنترل هائی که می خواهیم به صورت یه گروه باشند می بایست درون یک عنصر دیگر قرار گیرند. در این مثال ما از fieldset استفاده کردیم ولی می توان از عنصر دیگری همانند یک div استفاده نمود. سپس عنصر fieldset را با گروه فرم در مدل که آنرا name نامیده ایم مرتبط می کنیم.

<fieldset formGroupName="name"> ... </fieldset>

سپس یک بار دیگر درون عنصر fieldset از راهنمای formControlName استفاده می کنیم تا هر یک از کنترل های قالب را به کنترل های فرم که درون گروه name در مدل قرار دارند لینک کنیم. شکل نهائی قالب به این صورت خواهد بود :

<form [formGroup]="myform"> ①

		<fieldset formGroupName="name"> ②
			<div class="form-group">
				<label>First Name</label>
				<input type="text"
					class="form-control"
					formControlName="firstName" ③
					required>
			</div>
			<div class="form-group">
				<label>Last Name</label>
				<input type="text"
					class="form-control"
					formControlName="lastName" ③
					required>
			</div>
		</fieldset>

		<div class="form-group">
			<label>Email</label>
			<input type="email"
				class="form-control"
				formControlName="email" ④
				required>
		</div>

		<div class="form-group">
			<label>Password</label>
			<input type="password"
				class="form-control"
				formControlName="password" ④
				required>
		</div>

		<div class="form-group">
			<label>Language</label>
			<select class="form-control"
				formControlName="language" ④
				<option value="">Please select a language</option>
				<option *ngFor="let lang of langs"
					[value]="lang">{{lang}}
				</option>
			</select>
		</div>

		<pre>{{myform.value | json}}</pre>
</form>

1. formGroup فرم را به یک وهله از FormGroup در کامپوننت متصل می کند.
2. formGroupName نشان دهنده FormGroup فرزند از myform است.
3. formControlName اتصال به یک وهله از formControl را برقرار می کند. از آنجائیکه این کنترل های فرم درون یک formGroupName از name قرار دارند، آنگولار myform['name'] را برای یافتن این کنترل جستجو می کند.
4. از formControlName برای اتصال به یک وهله از FormControl که مستقیماً درون myform قرار دارد استفاده می شود.

حال هر یک از کنترل های فرم در قالب HTML به کنترل متناظر در مدل متصل شده اند و همینطور که ما اطلاعات ورودی را در کنترل ها وارد می کنیم، myform.value به روز شده و مقادیر آن در انتهای قالب نمایش داده می شوند. 

---

فرمهای برگرفته از مدل یا فرمهای واکنشی - خلاصه

در این مقاله ابتدا یک فرم ساده طراحی کردیم. سپس ما با استفاده از کلاسهای FormGroup و FormControl یک مدل فرم در کامپوننت ایجاد کردیم. سپس با استفاده از راهنماهائی از قبیل formGroup، formControlName و formGroupName فرم HTML را به فرم مدل پیوند دادیم.

در مقاله بعدی یاد میگیریم که چگونه کدهای اعتبارسنجی را به فرم اضافه کنیم تا فرم ما بتواند به صورت تصویری نسبت به ورود اطلاعات نادرست واکنش مناسب نشان دهد.

• قبلی