فرم ها (Forms) در انگولار 7 – آموزش انگولار 7

چهارشنبه ۳۰ مرداد ۱۳۹۸
بازدید ۱,۵۱۹ نفر
آرتین
(14 امتیاز از 3 رای)
Loading...

تصویر angular7-forms_6630 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

فرم ها (Forms) در انگولار 7

در این بخش از آموزش انگولار 7، نحوه استفاده از فرم ها (Forms) در انگولار 7 را بررسی خواهیم کرد. در انگولار 7 به دو روش Template driven و Model driven می توان از فرم ها استفاده کرد.

روش Template Driven

در این روش بیشتر کارها در قالب و با استفاده از کدهای HTML انجام می شود و اما در روش model driven اکثر کارها در داخل کلاس کامپوننت انجام می شود. برای درک بهتر روش template-driven ، با استفاده از این روش یک فرم ساده لاگین با ورودی های email و password به همراه یک دکمه submit ایجاد می کنیم. قبل از شروع باید ماژول FormsModule را از angular/forms به فایل app.module.ts اضافه کنیم.

مانند نمونه زیر:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      FormsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule , RoutingComponent} from './app-routing.module';

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

import { MyserviceService } from './myservice.service';

import { HttpClientModule } from '@angular/common/http';

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

import { DragDropModule } from '@angular/cdk/drag-drop';

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

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective,

RoutingComponent

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule,

ScrollDispatchModule,

DragDropModule,

FormsModule

providers: [MyserviceService],

bootstrap: [AppComponent]

})

export class AppModule { }

همانطور که در کد فوق مشاهده می کنید، ماژول FormsModule اضافه و آن را در بخش imports اضافه کرده ایم. حال باید خود فرم (قالب فرم) را در فایل app.component.html ایجاد کنیم:

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)">
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

<br/>

<br/>

</form>

در کد فوق سه عنصر از نوع input برای email، password و دکمه submit ایجاد کرده ایم. در فرم های ایجاد شده با رویکرد template-driven باید با استفاده از دستور ngModel و صفت name یک مدل از کنترل های موجود ایجاد کنیم. بنابراین هر جا که لازم باشد انگولار به عنصر دسترسی داشته باشد، باید ngModel را به آن اضافه کنیم. حال چون ما می خواهیم انگولار به email و password دسترسی داشته باشد، ngModel را به این دو تگ اضافه کرده ایم.

اگر به عنصر form نگاه کنید، ما ngForm را به #userLogin اضافه کرده ایم. همچنین یک تابع با نام onClickSubmit برای هندل کردن رویداد submit فرم رو نیز مشخص شده و مقداد userlogin.value به عنوان ورودی به آن تابع ارسال می شود.

حال تابع onClickSubmit را در فایل app.component.ts ایجاد می کنیم:

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   constructor(private myservice: MyserviceService) { }
   ngOnInit() { }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

import { Component } from '@angular/core';

import { MyserviceService } from './myservice.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 7 Project!';

constructor(private myservice: MyserviceService) { }

ngOnInit() { }

onClickSubmit(data) {

alert("Entered Email id : " + data.emailid);

}

در کد فوق ما تابع onClickSubmit را پیاده سازی کرده ایم و زمانی که فرم submit شود، عنصر فرم به این تابع ارسال می شود.

محتوای CSS که به فایل app.component.css اضافه شده است:

input[type = text], input[type = password] {
   width: 40%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #B3A9A9;
   box-sizing: border-box;
}
input[type = submit] {
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #B3A9A9;
   box-sizing: border-box;
}

input[type = text], input[type = password] {

width: 40%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #B3A9A9;

box-sizing: border-box;

}

input[type = submit] {

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #B3A9A9;

box-sizing: border-box;

}

خروجی برنامه:

تصویر angular7-forms_6630_1 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

برای تست برنامه ایجاد شده یک ایمیل در ورودی email وارد کنید و بر روی دکمه submit کلیک کنید تا خروجی زیر را مشاهده کنید:

تصویر angular7-forms_6630_2 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

روش Model Driven

در این روش باید ابتدا ماژول ReactiveFormsModule را از angular/forms وارد و در بخش imports اضافه کنیم.

مانند نمونه زیر:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule , RoutingComponent} from './app-routing.module';

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

import { MyserviceService } from './myservice.service';

import { HttpClientModule } from '@angular/common/http';

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

import { DragDropModule } from '@angular/cdk/drag-drop';

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

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective,

RoutingComponent

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule,

ScrollDispatchModule,

DragDropModule,

ReactiveFormsModule

providers: [MyserviceService],

bootstrap: [AppComponent]

})

export class AppModule { }

در فایل app.component.ts برای استفاده از روش Model Driven باید چند ماژول دیگر (مانند FormGroup و FormControl) نیز به وارد کنیم.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("angular@gmail.com"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

import { Component } from '@angular/core';

import { MyserviceService } from './myservice.service';

import { FormGroup, FormControl } from '@angular/forms';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 7 Project!';

emailid;

formdata;

constructor(private myservice: MyserviceService) { }

ngOnInit() {

this.formdata = new FormGroup({

emailid: new FormControl("angular@gmail.com"),

passwd: new FormControl("abcd1234")

});

}

onClickSubmit(data) {this.emailid = data.emailid;}

}

متغیر formdata در شروع کلاس با شیء از FormGroup مقداردهی اولیه شده و یک مقدار پیشفرضی برای email و password تنظیم می کند. شما می توانید این مقادیر پیشفرض را تنظیم نکنید و فیلد به صورت خالی نمایش داده شود.

خروجی:

تصویر angular7-forms_6630_3 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

ما برای مقداردهی به عناصر فرم از متغیر formdata استفاده می کنیم.

مانند نمونه زیر:

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd"
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" class = "forsubmit" value = "Log In">
   </form>
</div>
<p> Email entered is : {{emailid}} </p>

<div>

<input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"

formControlName = "emailid">

<br/>

<input type = "password" class = "fortextbox" name = "passwd"

placeholder = "passwd" formControlName = "passwd">

<br/>

</form>

</div>

<p> Email entered is : {{emailid}} </p>

در کد فوق برای آن که داده های formdata بر روی فرم اعمال شود، باید نام متغیر را در [formGroup] قرار دهیم. زمانی که فرم submit شود، تابع onClickSubmit با مقدار formdata.value فراخوانی می شود.

همچنین در تگ input از formControlName استفاده شده است که مقدار مشخص شده در فایل app.component.ts را به عنوان مقدار تگ تنظیم می کند. زمانی که بر روی دکمه کلیک شود، اطلاعات فرم به تابع onClickSubmit که در فایل app.component.ts ایجاد کرده ایم ارسال می شود و مقدار ایمیل در زیر فرم نمایش داده می شود.

تصویر angular7-forms_6630_4 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

اعتبار سنجی فرم (Form Validation)

شما می توانید از روش های موجود در خود انگولار یا روش های سفارشی خودتان برای اعتبار سنجی فرم استفاده کنید. ما هر دو روش را بررسی خواهیم کرد. به منظور استفاده از قابلیت اعتبار سنجی انگولار باید موارد زیر را import کنید:

import { FormGroup, FormControl, Validators} from '@angular/forms'

1	import { FormGroup, FormControl, Validators} from '@angular/forms'

از جمله validator های موجود در خود انگولار می توان به فیلد اجباری (mandatory field)، کمترین طول (minlength)، بیشترین طول (maxlength) و الگو (pattern) اشاره کرد که از طریق ماژول Validators قابل دسترس است. شما می توانید از یک یا چند validator برای اعتبار سنجی یک فیلد استفاده کنید. برای درک بهتر ما دو validator زیر را برای ورودی ایمیل مشخص می کنیم:

Required
Pattern matching

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

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

import { Component } from '@angular/core';

import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 4 Project!';

todaydate;

componentproperty;

emailid;

formdata;

ngOnInit() {

this.formdata = new FormGroup({

emailid: new FormControl("", Validators.compose([

Validators.required,

Validators.pattern("[^ @]*@[^ @]*")

])),

passwd: new FormControl("")

});

}

onClickSubmit(data) {this.emailid = data.emailid;}

}

در Validators.compose شما می توانید لیستی از چیزایی که می خواهید برای اعتبار سنجی بررسی شوند، را مشخص کنید. در حال حاضر ما فقط required و pattern را اضافه کرده ایم.

در فایل app.component.html ما برای فعال بودن دکمه submit شرط گذاشته ایم و تا زمانی formdata معتبر نباشد، این دکمه غیرفعال خواهد بود.

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)">
      <input type = "text" class = "fortextbox" name = "emailid"
         placeholder = "emailid" formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd"
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit"
         value = "Log In">
   </form>
</div>
<p> Email entered is : {{emailid}} </p>

<div>

<input type = "text" class = "fortextbox" name = "emailid"

placeholder = "emailid" formControlName = "emailid">

<br/>

<input type = "password" class = "fortextbox" name = "passwd"

placeholder = "passwd" formControlName = "passwd">

<br/>

<input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit"

value = "Log In">

</form>

</div>

<p> Email entered is : {{emailid}} </p>

خروجی:

تصویر angular7-forms_6630_5 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

همانطور که در عکس فوق مشاهده می کنید، چون در ورودی ایمیل مقدار معتبری وارد نشده است، دکمه submit غیرفعال مانده است. حال اگر ما یک ایمیل معتبر در فیلد مربوط به ایمیل وارد کنیم، دکمه submit فعال خواهد شد.

تصویر angular7-forms_6630_6 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

تا اینجای کار ما از validator های آماده خود انگولار استفاده کردیم. حال نحوه ساخت validator سفارشی را بررسی می کنیم. برای اینکار باید یک تابع سفارشی برای انجام اعتبار سنجی دلخواه ایجاد کنیم.

به نمونه زیر توجه کنید:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

import { Component } from '@angular/core';

import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 7 Project!';

todaydate;

componentproperty;

emailid;

formdata;

ngOnInit() {

this.formdata = new FormGroup({

emailid: new FormControl("", Validators.compose([

Validators.required,

Validators.pattern("[^ @]*@[^ @]*")

])),

passwd: new FormControl("", this.passwordvalidation)

});

}

passwordvalidation(formcontrol) {

if (formcontrol.value.length < 5) {

return {"passwd" : true};

}

onClickSubmit(data) {this.emailid = data.emailid;}

}

در کد فوق ما یک تابع با نام passwordvalidation برای بررسی طول پسورد وارد شده تعریف و در بخش passwd: new FormControl(“”, this.passwordvalidation) از آن استفاده کرده ایم.

خروجی برنامه:

تصویر angular7-forms_6630_7 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

در تصویر فوق با این که مقدار ایمیل وارد شده معتبر است، اما چون طول پسورد از ۵ کاراکتر کمتر است، دکمه submit غیرفعال باقی مانده است. اگر هر دو فیلد ورودی معتبر باشند، formdata نیز valid می شود و این موضوع باعث فعال شدن دکمه submit می گردد.

تصویر angular7-forms_6630_8 فرم ها (Forms) در انگولار 7 - آموزش انگولار 7

انگولار 7 - اسکرول مجازی انگولار 7 - دستورات CLI

دسته ها: آموزش ها - زبان برنامه نویسی Angular

حسن علی نژاد دوشنبه , 4 شهریور
پاسخ دادن
سلام، من می خواستم برای توسعه برنامه های وب یک فریم ورک مناسب رو یاد بگیرم. تو نت گشتم بیشتر فریم ورک Angular و ReactJS رو دیدم، حالا موندم بین این دوتا کدومو انتخاب کنیم. به نظرتون کدومشون بهتره؟
- یعثوب سیفی زادهدوشنبه , 4 شهریور
  پاسخ دادن
  فریم ورک انگولار خیلی عالی است و وب سایت های که با این فریم ورک نوشته میشن از نظر سرعت خوب است پیشنهاد می کنم حتما انگولار رو یاد بگیرید تا قدرت واقعی این فریم ورک رو ببینید

آموزش برنامه نویسی PHP از مقدماتی تا پیشرفته (فیلم آموزشی)

آموزش پروژه محور سی شارپ (سیستم ثبت نام و انتخاب واحد دانشجویان)

فیلم آموزش AngularJS (انگولار جی اس) به زبان فارسی

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش سی شارپ به صورت پروژه محور (مدیریت مصالح ساختمانی)

آموزش سی شارپ به صورت پروژه محور (مدیریت فروشگاه)

آموزش سی شارپ به صورت پروژه محور (مدیریت داروخانه)

آموزش Angular 7

مباحث پایه Angular 7

مثال های کاربردی Angular 7

فرم ها (Forms) در انگولار 7 – آموزش انگولار 7

فرم ها (Forms) در انگولار 7

روش Template Driven

روش Model Driven

اعتبار سنجی فرم (Form Validation)

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

سورس سیستم مدیریت داروخانه به زبان سی شارپ

سورس سیستم مدیریت حقوق و دستمزد به زبان سی شارپ

سورس تغییر رنگ پس زمینه دسکتاپ در سی شارپ

سورس سیستم مدیریت حمل و نقل به زبان سی شارپ

سورس رسم فرم فاکتور به زبان سی شارپ

سورس خواندن اعداد با صدای فارسی در زبان سی شارپ

سورس تبدیل عدد به حروف فارسی در زبان سی شارپ