Validate là gì

Giới thiệu ngôn từ bài viết

Chào chúng ta, bây giờ anh đã gợi ý rất nhiều người giải pháp Custom Validation là như thế nào?

1.Custom Validation là gì

Angular cung cấp một số trong những validator nhỏng required, minlength, maxlength, pattern cùng tin nhắn nlỗi ta đã xem ngơi nghỉ bài bác trước. Ngoài phần lớn validator có sẵn của Angular ta trọn vẹn rất có thể trường đoản cú sinh sản một validator mang lại dự án công trình của chính mình.

Bạn đang xem: Validate là gì

Quý khách hàng đang xem: Validator là gì

2.Sử dụng Validator như thế nào

Giả sử ta tất cả size trong file template html nhỏng sau.

123456789101112131415161718h1>Custom Validator in Angular/h1> h2>Reactive sầu Form/h2> size ="myForm" (ngSubmit)="onSubmit()" novalidate> div> label for="numVal">Number :/label> input đầu vào type="text" id="numVal" name="numVal" formControlName="numVal"> /div> p>Is Form Valid : /p> p> button type="submit" ="!myForm.valid">Submit/button> /p> /form>
Nlỗi những em thấy ta có 1 field trong form là numVal. Chúng ta ước ao quý hiếm trong numVal đề xuất lớn hơn 10.

Bây giờ đồng hồ ta sẽ khái niệm một Validator riêng rẽ cho Việc bình chọn quý giá lớn hơn 10. Ta chế tác một tệp tin gte.validator.js nhỏng sau:

1234567891011121314151617import AbstractControl, ValidationErrors from "angular/forms" export function gte(control: AbstractControl): ValidationErrors | null const v=+control.value; if (isNaN(v)) return "gte": true, "requiredValue": 10 if (v 10) return "gte": true, "requiredValue": 10 return null
Trước tiên họ import thỏng viện AbstractControl với Validation Error từ Angular Form.

Xem thêm: Ca Sĩ Bảo Anh Là Ai? Tiểu Sử Bảo Anh Tiểu Sử, Năm Sinh, Chiều Cao Bảo Anh

Trong ví dụ sau họ kiểm soát giá trị của control liệu có phải là số hay không. Để bình chọn số ta cần sử dụng hàm isNaN. Đồng thời kiểm soát quý giá nhỏ hơn hay bằng 10. Nếu cả hai ĐK là đúng thì trả về null.

1234567891011const v=+control.value; if (isNaN(v)) return "gte": true, "requiredValue": 10 if (v 10) return "gte": true, "requiredValue": 10 return null
Nếu validator bị không nên thì trả về Validator Error.

1import gte from "./gte.validator";
Thêm validator vào khung như sau.

123 myForm = new FormGroup( numVal: new FormControl("", ), )

3. Code hoàn chỉnh cho component class

1234567891011121314151617181920212223242526import Component from "angular/core";import FormGroup, FormControl, AbstractControl, ValidationErrors from "angular/forms"import gte from "./gte.validator"; Component( selector: "app-root", templateUrl: "./ứng dụng.component.html", styleUrls: )export class AppComponent constructor() myForm = new FormGroup( numVal: new FormControl("", ), ) get numVal() return this.myForm.get("numVal"); onSubmit() console.log(this.myForm.value);

4. Code hoàn chỉnh mang lại template html

12345678910 div> label for="numVal">Number :/label> input type="text" id="numVal" name="numVal" formControlName="numVal"> div *ngIf="!numVal.valid &và (numVal.dirty ||numVal.touched)"> div *ngIf="numVal.errors.gte"> The number should be greater than /div> /div> /div>

6. Demo Video


*

*

Mọi bạn hãy Subscribe kênh youtube dưới đây nhé nhằm cập nhật các Clip mới nhất về kỹ thuật và năng lực mượt

Các khoá học tập lập trình sẵn MIỄN PHÍ trên phía trên

CommentsChuyên mục: Chia sẻ