Giới thiệu nội dung bài viết
Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách Custom Validation là như thế nào?
1.Custom Validation là gì
Angular hỗ trợ một số validator như required, minlength, maxlength, pattern và email như ta đã xem ở bài trước. Ngoài những validator có sẵn của Angular ta hoàn toàn có thể tự tạo một validator cho dự án của mình.Bạn đang xem: Validator là gì
2.Sử dụng Validator như thế nào
Giả sử ta có form trong file template html như sau.
Đang xem: Hướng dẫn staking near trên ví near và tìm validator là gì,
| 123456789101112131415161718 | h1>Custom Validator in Angular/h1> h2>Reactive Form/h2> form =”myForm” (ngSubmit)=”onSubmit()” novalidate> div> label for=”numVal”>Number :/label> input type=”text” id=”numVal” name=”numVal” formControlName=”numVal”> /div> p>Is Form Valid : /p> p> button type=”submit” =”!myForm.valid”>Submit/button> /p> /form> |
Như các em thấy ta có 1 field trong form là numVal. Chúng ta muốn giá trị trong numVal phải lớn hơn 10.
Bây giờ ta sẽ định nghĩa một Validator riêng cho việc kiểm tra giá trị lớn hơn 10. Ta tạo một file gte.validator.js như sau:
| 1234567891011121314151617 | import { 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 } |
Đầu tiên chúng ta import thư viện AbstractControl và Validation Error từ Angular Form.
Xem thêm: Phương Pháp Học Toán Tư Duy Soroban Là Gì ? Trẻ Có Nên Học Toán Soroban?
Trong ví dụ sau chúng ta kiểm tra giá trị của control có phải là số hay không. Để kiểm tra số ta dùng hàm isNaN. Đồng thời kiểm tra giá trị nhỏ hơn hay bằng 10. Nếu cả 2 điều kiện là đúng thì trả về null.
| 1234567891011 | const 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ị sai thì trả về Validator Error.
Xem thêm: Cbd Và Thc Là Gì – Phụ Phí Thc Trong Vận Tải Container
| 1 | import { gte } from “./gte.validator”; |
Thêm validator vào form như sau.
| 123 | myForm = new FormGroup({ numVal: new FormControl(“”, ), }) |
3. Code hoàn chỉnh cho component class
| 1234567891011121314151617181920212223242526 | import { Component } from “angular/core”;import { FormGroup, FormControl, AbstractControl, ValidationErrors } from “angular/forms”import { gte } from “./gte.validator”; Component({ selector: “app-root”, templateUrl: “./app.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 cho template html
| 12345678910 | div> label for=”numVal”>Number :/label> input type=”text” id=”numVal” name=”numVal” formControlName=”numVal”> div *ngIf=”!numVal.valid && (numVal.dirty ||numVal.touched)”> div *ngIf=”numVal.errors.gte”> The number should be greater than /div> /div> /div> |
6. Demo Video
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
CommentsChuyên mục: Chia sẻ