Angular 6 - Biểu mẫu
Trong chương này, chúng ta sẽ xem cách các biểu mẫu được sử dụng trong Angular 6. Chúng ta sẽ thảo luận về hai cách làm việc với biểu mẫu - biểu mẫu hướng mẫu và biểu mẫu hướng mô hình.
Mẫu theo hướng mẫu
Với biểu mẫu được điều khiển theo mẫu, hầu hết công việc được thực hiện trong mẫu; và với biểu mẫu hướng mô hình, hầu hết công việc được thực hiện trong lớp thành phần.
Bây giờ chúng ta hãy xem xét làm việc trên biểu mẫu được điều khiển bởi Mẫu. Chúng tôi sẽ tạo một biểu mẫu đăng nhập đơn giản và thêm id email, mật khẩu và gửi nút trong biểu mẫu. Để bắt đầu, chúng ta cần nhập vào FormsModule từ@angular/core được thực hiện trong app.module.ts như sau -
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 { }Vì vậy, trong app.module.ts, chúng tôi đã nhập FormsModule và điều tương tự được thêm vào mảng nhập như được hiển thị trong mã được đánh dấu.
Bây giờ chúng ta hãy tạo biểu mẫu của mình trong app.component.html tập tin.
<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>Chúng tôi đã tạo một biểu mẫu đơn giản với các thẻ đầu vào có id email, mật khẩu và nút gửi. Chúng tôi đã chỉ định loại, tên và trình giữ chỗ cho nó.
Trong các biểu mẫu hướng mẫu, chúng ta cần tạo các điều khiển biểu mẫu mô hình bằng cách thêm ngModel chỉ thị và namethuộc tính. Vì vậy, bất cứ nơi nào chúng ta muốn Angular truy cập dữ liệu của mình từ các biểu mẫu, hãy thêm ngModel vào thẻ đó như hình trên. Bây giờ, nếu chúng ta phải đọc emailid và passwd, chúng ta cần thêm ngModel trên đó.
Nếu bạn thấy, chúng tôi cũng đã thêm ngForm vào #userlogin. CácngFormChỉ thị cần được thêm vào mẫu biểu mẫu mà chúng tôi đã tạo. Chúng tôi cũng đã thêm chức năngonClickSubmit và được giao userlogin.value với nó.
Bây giờ chúng ta hãy tạo hàm trong app.component.ts và tìm nạp các giá trị đã nhập trong biểu mẫu.
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 6 Project!';
todaydate;
componentproperty;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
onClickSubmit(data) {
alert("Entered Email id : " + data.emailid);
}
}Ở trên app.component.ts, chúng tôi đã xác định hàm onClickSubmit. Khi bạn bấm vào nút gửi biểu mẫu, điều khiển sẽ đến chức năng trên.
Đây là cách trình duyệt được hiển thị -
Có dạng như hình bên dưới. Hãy để chúng tôi nhập dữ liệu vào đó và trong chức năng gửi, id email đã được nhập.
Id email được hiển thị ở dưới cùng như trong ảnh chụp màn hình ở trên.
Mẫu điều khiển mô hình
Trong biểu mẫu được điều khiển bởi mô hình, chúng ta cần nhập ReactiveFormsModule từ @ angle / form và sử dụng cùng một trong mảng nhập.
Có một sự thay đổi xảy ra trong 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 { }Trong app.component.ts, chúng ta cần nhập một vài mô-đun cho biểu mẫu điều khiển mô hình. Ví dụ,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 6 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;}
}Dữ liệu biểu mẫu biến được khởi tạo khi bắt đầu lớp và cùng được khởi tạo với FormGroup như hình trên. Các biến emailid và passwd được khởi tạo với các giá trị mặc định để hiển thị trong biểu mẫu. Bạn có thể để trống trong trường hợp bạn muốn.
Đây là cách các giá trị sẽ được nhìn thấy trong giao diện người dùng của biểu mẫu.
Chúng tôi đã sử dụng dữ liệu biểu mẫu để khởi tạo các giá trị biểu mẫu; chúng ta cần sử dụng cùng một giao diện người dùngapp.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>Trong tệp .html, chúng tôi đã sử dụng formGroup trong dấu ngoặc vuông cho biểu mẫu; ví dụ: [formGroup] = "formdata". Khi gửi, hàm được gọi làonClickSubmit mà formdata.value được thông qua.
Thẻ đầu vào formControlNameĐược sử dụng. Nó được cung cấp một giá trị mà chúng tôi đã sử dụng trongapp.component.ts tập tin.
Khi nhấp vào gửi, điều khiển sẽ chuyển đến chức năng onClickSubmit, được định nghĩa trong app.component.ts tập tin.
Khi nhấp vào Đăng nhập, giá trị sẽ được hiển thị như trong ảnh chụp màn hình ở trên.
Xác thực biểu mẫu
Bây giờ chúng ta hãy thảo luận về xác thực biểu mẫu bằng cách sử dụng biểu mẫu hướng mô hình. Bạn có thể sử dụng xác thực biểu mẫu có sẵn hoặc cũng có thể sử dụng phương pháp xác thực tùy chỉnh. Chúng tôi sẽ sử dụng cả hai cách tiếp cận trong biểu mẫu. Chúng tôi sẽ tiếp tục với cùng một ví dụ mà chúng tôi đã tạo trong một trong các phần trước của chúng tôi. Với Angular 4, chúng ta cần nhập Validators từ@angular/forms như hình dưới đây -
import { FormGroup, FormControl, Validators} from '@angular/forms'Angular có các trình xác thực tích hợp như mandatory field, minlength, maxlengthvà pattern. Chúng phải được truy cập bằng mô-đun Validators.
Bạn chỉ có thể thêm trình xác thực hoặc một loạt trình xác thực cần thiết để cho Angular biết nếu một trường cụ thể là bắt buộc.
Bây giờ chúng ta hãy thử tương tự trên một trong các hộp văn bản đầu vào, tức là id email. Đối với id email, chúng tôi đã thêm các thông số xác thực sau:
- Required
- Khớp mẫu
Đây là cách mã trải qua quá trình xác thực trong 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 6 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;}
}Trong Validators.compose, bạn có thể thêm danh sách những thứ bạn muốn xác thực trên trường nhập. Ngay bây giờ, chúng tôi đã thêmrequired và pattern matching tham số để chỉ nhận email hợp lệ.
bên trong app.component.html, nút gửi bị tắt nếu bất kỳ đầu vào biểu mẫu nào không hợp lệ. Điều này được thực hiện như sau:
<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>Đối với nút gửi, chúng tôi đã thêm nút tắt trong dấu ngoặc vuông, được cho giá trị - !formdata.valid. Do đó, nếu formdata.valid không hợp lệ, nút sẽ vẫn bị vô hiệu hóa và người dùng sẽ không thể gửi nó.
Hãy để chúng tôi xem cách thức hoạt động của tính năng này trong trình duyệt -
Trong trường hợp trên, id email đã nhập không hợp lệ, do đó nút đăng nhập bị tắt. Bây giờ chúng ta hãy thử nhập id email hợp lệ và xem sự khác biệt.
Bây giờ, id email đã nhập là hợp lệ. Vì vậy, chúng ta có thể thấy nút đăng nhập được bật và người dùng sẽ có thể gửi nó. Với điều này, id email đã nhập sẽ hiển thị ở dưới cùng.
Bây giờ chúng ta hãy thử xác thực tùy chỉnh với cùng một biểu mẫu. Để xác thực tùy chỉnh, chúng tôi có thể xác định chức năng tùy chỉnh của riêng mình và thêm các chi tiết bắt buộc trong đó. Bây giờ chúng ta sẽ xem một ví dụ tương tự.
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 6 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;}
}Trong ví dụ trên, chúng ta đã tạo một hàm password validation và điều tương tự được sử dụng trong phần trước trong điều khiển biểu mẫu - passwd: new FormControl("", this.passwordvalidation).
Trong hàm mà chúng tôi đã tạo, chúng tôi sẽ kiểm tra xem độ dài của các ký tự được nhập vào có phù hợp hay không. Nếu các ký tự nhỏ hơn năm, nó sẽ trả về mật khẩu true như được hiển thị ở trên -return {"passwd" : true};. Nếu nhiều hơn năm ký tự, nó sẽ được coi là hợp lệ và đăng nhập sẽ được kích hoạt.
Bây giờ chúng ta hãy xem cách này được hiển thị trong trình duyệt -
Chúng tôi chỉ nhập ba ký tự trong mật khẩu và đăng nhập bị vô hiệu hóa. Để kích hoạt đăng nhập, chúng tôi cần nhiều hơn năm ký tự. Bây giờ chúng ta hãy nhập độ dài hợp lệ của các ký tự và kiểm tra.
Đăng nhập được bật vì cả id email và mật khẩu đều hợp lệ. Email được hiển thị ở dưới cùng khi chúng tôi đăng nhập.