Angular 4 - แบบฟอร์ม

ในบทนี้เราจะดูวิธีใช้ฟอร์มใน Angular 4 เราจะพูดถึงสองวิธีในการทำงานกับฟอร์ม - เทมเพลตที่ขับเคลื่อนด้วยฟอร์มและฟอร์มที่ขับเคลื่อนด้วยโมเดล

แบบฟอร์มการขับเคลื่อนเทมเพลต

ด้วยเทมเพลตที่ขับเคลื่อนด้วยฟอร์มงานส่วนใหญ่จะทำในเทมเพลต และด้วยรูปแบบที่ขับเคลื่อนด้วยโมเดลงานส่วนใหญ่จะทำในคลาสส่วนประกอบ

ตอนนี้ให้เราพิจารณาการทำงานกับแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต เราจะสร้างแบบฟอร์มการเข้าสู่ระบบอย่างง่ายและเพิ่มรหัสอีเมลรหัสผ่านและส่งปุ่มในแบบฟอร์ม ในการเริ่มต้นเราต้องนำเข้าสู่ FormsModule จาก@angular/core ซึ่งทำใน app.module.ts ดังต่อไปนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

ดังนั้นใน app.module.tsเราได้นำเข้า FormsModule และสิ่งเดียวกันนี้จะถูกเพิ่มเข้าไปในอาร์เรย์การนำเข้าดังที่แสดงในโค้ดที่ไฮไลต์

ให้เราสร้างแบบฟอร์มของเราในไฟล์ 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>

เราได้สร้างแบบฟอร์มที่เรียบง่ายโดยมีแท็กอินพุตที่มีรหัสอีเมลรหัสผ่านและปุ่มส่ง เราได้กำหนดประเภทชื่อและตัวยึดตำแหน่งให้แล้ว

ในเทมเพลตที่ขับเคลื่อนด้วยฟอร์มเราจำเป็นต้องสร้างตัวควบคุมฟอร์มโมเดลโดยการเพิ่มไฟล์ ngModel คำสั่งและ nameแอตทริบิวต์ ดังนั้นทุกที่ที่เราต้องการให้ Angular เข้าถึงข้อมูลของเราจากแบบฟอร์มให้เพิ่ม ngModel ลงในแท็กดังที่แสดงไว้ด้านบน ตอนนี้ถ้าเราต้องอ่าน emailid และ passwd เราจำเป็นต้องเพิ่ม ngModel ลงไป

หากคุณเห็นเราได้เพิ่ม ngForm ลงในไฟล์ #userlogin. ngFormต้องเพิ่มคำสั่งลงในเทมเพลตฟอร์ที่เราสร้างขึ้น เรายังได้เพิ่มฟังก์ชั่นonClickSubmit และได้รับมอบหมาย userlogin.value ไปเลย

ให้เราสร้างฟังก์ชันในไฟล์ 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 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

ในข้างต้น app.component.tsไฟล์เราได้กำหนดฟังก์ชั่น onClickSubmit เมื่อคุณคลิกที่ปุ่มส่งแบบฟอร์มตัวควบคุมจะมาที่ฟังก์ชันด้านบน

นี่คือวิธีแสดงเบราว์เซอร์ -

แบบฟอร์มมีลักษณะดังภาพด้านล่าง ให้เราป้อนข้อมูลในนั้นและในฟังก์ชัน submit รหัสอีเมลจะถูกป้อนแล้ว

รหัสอีเมลจะปรากฏที่ด้านล่างตามที่แสดงในภาพหน้าจอด้านบน

แบบจำลองการขับเคลื่อน

ในรูปแบบที่ขับเคลื่อนด้วยโมเดลเราจำเป็นต้องนำเข้า ReactiveFormsModule จาก @ angular / รูปแบบและใช้แบบเดียวกันในอาร์เรย์การนำเข้า

มีการเปลี่ยนแปลงที่เข้ามา app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

ใน app.component.tsเราจำเป็นต้องนำเข้าโมดูลสองสามโมดูลสำหรับรูปแบบที่ขับเคลื่อนด้วยโมเดล ตัวอย่างเช่น,import { FormGroup, FormControl } from '@angular/forms'.

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 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

formdata ตัวแปรถูกเตรียมใช้งานเมื่อเริ่มต้นคลาสและสิ่งเดียวกันนี้จะเริ่มต้นด้วย FormGroup ดังที่แสดงด้านบน ตัวแปร emailid และ passwd เริ่มต้นด้วยค่าเริ่มต้นที่จะแสดงในรูปแบบ คุณสามารถเว้นว่างไว้ได้ในกรณีที่คุณต้องการ

นี่คือค่าที่จะเห็นใน UI แบบฟอร์ม

เราได้ใช้ formdata เพื่อเริ่มต้นค่าแบบฟอร์ม เราจำเป็นต้องใช้สิ่งเดียวกันใน UI แบบฟอร์มapp.component.html.

<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>

ในไฟล์. html เราได้ใช้ formGroup ในวงเล็บเหลี่ยมสำหรับฟอร์ม ตัวอย่างเช่น [formGroup] =” formdata” เมื่อส่งฟังก์ชันจะถูกเรียกใช้onClickSubmit ซึ่ง formdata.value ถูกส่งผ่าน

แท็กอินพุต formControlNameถูกนำมาใช้. ได้รับค่าที่เราใช้ในไฟล์app.component.ts ไฟล์.

เมื่อคลิกส่งตัวควบคุมจะส่งผ่านไปยังฟังก์ชัน onClickSubmitซึ่งกำหนดไว้ในไฟล์ app.component.ts ไฟล์.

เมื่อคลิกเข้าสู่ระบบค่าจะแสดงดังที่แสดงในภาพหน้าจอด้านบน

การตรวจสอบแบบฟอร์ม

ตอนนี้ให้เราหารือเกี่ยวกับการตรวจสอบแบบฟอร์มโดยใช้แบบจำลองที่ขับเคลื่อนด้วย คุณสามารถใช้การตรวจสอบความถูกต้องของฟอร์มในตัวหรือใช้วิธีการตรวจสอบความถูกต้องแบบกำหนดเอง เราจะใช้ทั้งสองแนวทางในรูปแบบ เราจะดำเนินการต่อด้วยตัวอย่างเดียวกับที่เราสร้างไว้ในส่วนก่อนหน้าของเรา ด้วย Angular 4 เราจำเป็นต้องนำเข้า Validators จาก@angular/forms ดังแสดงด้านล่าง -

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

Angular มีตัวตรวจสอบความถูกต้องในตัวเช่น mandatory field, minlength, maxlengthและ pattern. สิ่งเหล่านี้สามารถเข้าถึงได้โดยใช้โมดูล Validators

คุณสามารถเพิ่มตัวตรวจสอบความถูกต้องหรืออาร์เรย์ของตัวตรวจสอบความถูกต้องที่จำเป็นเพื่อบอก Angular ว่าฟิลด์ใดฟิลด์หนึ่งจำเป็นหรือไม่

ตอนนี้ให้เราลองทำแบบเดียวกันกับช่องป้อนข้อความเช่นรหัสอีเมล สำหรับรหัสอีเมลเราได้เพิ่มพารามิเตอร์การตรวจสอบดังต่อไปนี้ -

• Required
• การจับคู่รูปแบบ

นี่คือวิธีที่รหัสผ่านการตรวจสอบความถูกต้องใน app.component.ts.

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 matching พารามิเตอร์เพื่อรับอีเมลที่ถูกต้องเท่านั้น

ใน app.component.htmlปุ่มส่งจะถูกปิดใช้งานหากอินพุตแบบฟอร์มใด ๆ ไม่ถูกต้อง ทำได้ดังนี้ -

<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>

สำหรับปุ่มส่งเราได้เพิ่มปิดใช้งานในวงเล็บเหลี่ยมซึ่งได้รับค่า - !formdata.valid. ดังนั้นหาก formdata.valid ไม่ถูกต้องปุ่มจะยังคงปิดใช้งานและผู้ใช้จะไม่สามารถส่งได้

ให้เราดูวิธีการทำงานในเบราว์เซอร์ -

ในกรณีข้างต้นรหัสอีเมลที่ป้อนไม่ถูกต้องจึงปิดใช้งานปุ่มเข้าสู่ระบบ ให้เราลองป้อนรหัสอีเมลที่ถูกต้องและดูความแตกต่าง

ตอนนี้รหัสอีเมลที่ป้อนถูกต้อง ดังนั้นเราจะเห็นปุ่มเข้าสู่ระบบถูกเปิดใช้งานและผู้ใช้จะสามารถส่งได้ ด้วยวิธีนี้รหัสอีเมลที่ป้อนจะแสดงที่ด้านล่าง

ตอนนี้ให้เราลองตรวจสอบความถูกต้องแบบกำหนดเองด้วยแบบฟอร์มเดียวกัน สำหรับการตรวจสอบความถูกต้องเราสามารถกำหนดฟังก์ชันที่กำหนดเองและเพิ่มรายละเอียดที่ต้องการได้ ตอนนี้เราจะเห็นตัวอย่างเดียวกัน

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("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length <'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

ในตัวอย่างข้างต้นเราได้สร้างฟังก์ชัน password validation และใช้ในส่วนก่อนหน้าใน formcontrol - passwd: new FormControl("", this.passwordvalidation).

ในฟังก์ชันที่เราสร้างขึ้นเราจะตรวจสอบว่าความยาวของอักขระที่ป้อนนั้นเหมาะสมหรือไม่ หากอักขระน้อยกว่าห้าอักขระจะกลับมาพร้อมกับรหัสผ่านจริงดังที่แสดงด้านบน -return {"passwd" : true};. หากอักขระมากกว่าห้าอักขระจะถือว่าถูกต้องและการเข้าสู่ระบบจะเปิดใช้งาน

ตอนนี้ให้เราดูว่าสิ่งนี้แสดงในเบราว์เซอร์อย่างไร -

เราป้อนรหัสผ่านเพียงสามตัวอักษรและการเข้าสู่ระบบถูกปิดใช้งาน ในการเปิดใช้งานการเข้าสู่ระบบเราต้องมีอักขระมากกว่าห้าตัว ตอนนี้ให้เราป้อนความยาวของอักขระที่ถูกต้องและตรวจสอบ

การเข้าสู่ระบบถูกเปิดใช้งานเนื่องจากทั้งรหัสอีเมลและรหัสผ่านถูกต้อง อีเมลจะแสดงที่ด้านล่างเมื่อเราเข้าสู่ระบบ