Validator là gì

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

Chào các bạn, hôm nay anh đang trả lời những tín đồ phương pháp Custom Validation là như vậy nào?

1.Custom Validation là gì

Angular cung ứng một vài validator như required, minlength, maxlength, pattern và gmail như ta vẫn coi sống bài bác trước. Ngoài số đông validator gồm sẵn của Angular ta trọn vẹn có thể trường đoản cú tạo một validator đến dự án công trình của bản thân mình.quý khách hàng vẫn xem: Validator là gì

2.Sử dụng Validator như vậy nào

Giả sử ta gồm form trong file template html nhỏng sau.

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

123456789101112131415161718

h1>Custom Validator in Angular/h1> h2>Reactive Form/h2> khung ="myForm" (ngSubmit)="onSubmit()" novalidate> div> label for="numVal">Number :/label> đầ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 các em thấy ta có một field trong khung là numVal. Chúng ta mong muốn quý hiếm vào numVal nên to hơn 10.

Bây giờ đồng hồ ta đang định nghĩa một Validator riêng biệt mang lại câu hỏi khám nghiệm quý giá lớn hơn 10. Ta tạo ra một file gte.validator.js nhỏng 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

Thứ nhất họ import tlỗi viện AbstractControl với Validation Error từ bỏ 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 họ chất vấn giá trị của control liệu có phải là số hay không. Để khám nghiệm số ta dùng hàm isNaN. Đồng thời đánh giá cực hiếm nhỏ dại hơn tuyệt bằng 10. Nếu cả 2 ĐK 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ị không đúng 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 size nlỗi sau.

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

3. Code hoàn hảo mang đến 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: "./phầm mềm.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 && (numVal.dirty ||numVal.touched)"> div *ngIf="numVal.errors.gte"> The number should be greater than /div> /div> /div>

6. Demo Video

Mọi fan hãy Subscribe kênh youtube dưới đây nhé nhằm cập nhật các đoạn Clip tiên tiến nhất về nghệ thuật và tài năng mượt

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

CommentsChulặng mục: Chia sẻ

Chuyên mục: Định Nghĩa