Validate là gì

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

Chào các bạn, lúc này anh đã trả lời phần lớn người cách Custom Validation là như thế nào?

1.Custom Validation là gì

Angular cung cấp một số validator nhỏng required, minlength, maxlength, pattern cùng gmail nhỏng ta vẫn xem nghỉ ngơi bài bác trước. Ngoài hồ hết validator bao gồm sẵn của Angular ta hoàn toàn rất có thể trường đoản cú chế tạo một validator đến dự án công trình của bản thân.

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

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

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

Giả sử ta gồm form trong file template html nlỗi sau.

123456789101112131415161718h1>Custom Validator in Angular/h1> h2>Reactive 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>
Như những em thấy ta có một field vào form là numVal. Chúng ta mong mỏi giá trị vào numVal đề nghị lớn hơn 10.

Bây tiếng ta vẫn có mang một Validator riêng rẽ cho bài toán kiểm tra quý giá lớn hơn 10. Ta tạo thành một file gte.validator.js nlỗi 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
Thứ nhất bọn họ import thỏng viện AbstractControl và Validation Error từ bỏ Angular Form.

Xem thêm: Nghĩa Của Từ Sentry Là Gì ? Fix Bug Dễ Dàng Cùng Với Sentry

Trong ví dụ sau bọn họ khám nghiệm quý giá của control có phải là số hay là không. Để chất vấn số ta cần sử dụng hàm isNaN. Đồng thời kiểm soát cực hiếm nhỏ tuổi rộng hay bởi 10. Nếu cả 2 điều kiện 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 đúng thì trả về Validator Error.

Xem thêm:

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 đến 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: "./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 cho template html

12345678910 div> label for="numVal">Number :/label> đầu vào 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 người hãy Subscribe kênh youtube dưới đây nhé để cập nhật những video tiên tiến nhất về chuyên môn với tài năng mượt

Các khoá học lập trình MIỄN PHÍ tại đây

CommentsChuyên ổn mục: Chia sẻ

Chuyên mục: Tổng Hợp