Angular 2 Custom Validator: kiểm tra xem giá trị đầu vào có phải là số nguyên không?

Question

Trong dự án Angular2, tôi cần xác thực một số đầu vào. Làm thế nào để dễ dàng kiểm tra xem giá trị đầu vào có phải là số nguyên không?

Tôi đã thử sử dụng Number(control.value) trả về 0 cho trường trống - không tốt.

hoặc parseInt(control.value,10) mà dis-coi không gian:

Nếu tôi có một cái gì đó như: 1 không gian 0,24 = 1 ,024 nó trả 1 - mà vượt qua validator không có lỗi.

Các chức năng của Lodash như: _.isInteger(control.value) hoặc _.isNumeric(control.value) // return false every time - dự kiến ​​là vì giá trị đầu vào là một chuỗi không phải là số.

Kết hợp các phương pháp như thế này tạo ra một chức năng lộn xộn với nhiều câu lệnh if/else, và thậm chí sau đó, tôi không chắc tôi có được tất cả các trường hợp cạnh hay không. Tôi chắc chắn cần một cách tiếp cận thẳng về phía trước. Bất kỳ ý tưởng?

Answer 1

Đây là cách sạch nhất tôi tìm thấy cho đến nay:

app.component.html:

<input formControlName="myNumber"> 

app.component.ts:

export class AppComponent { 
    myNumber:FormControl 

    constructor(private _ValidatorsService: ValidatorsService){ 
    } 

    this.myNumber= new FormControl('defaultValue', 
     [ Validators.required, this._ValidatorsService.isInteger ]); 
} 

xác nhận .service.ts:

function check_if_is_integer(value){ 
    if((parseFloat(value) == parseInt(value)) && !isNaN(value)){ 
     // I can have spacespacespace1 - which is 1 and validators pases but 
     // spacespacespace doesn't - which is what i wanted. 
     // 1space2 doesn't pass - good 
     // of course, when saving data you do another parseInt. 
     return true; 
    } else { 
     return false; 
    } 
} 

@Injectable() 
export class ValidatorsService { 

    public isInteger = (control:FormControl) => { 
     return check_if_is_integer(control.value) ? null : { 
      notNumeric: true 
     } 
    } 

} 

Tận hưởng!

Answer 2

Chỉ cần tạo một validator tùy chỉnh:

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; 

export function integer(): ValidatorFn { 
    return (control: AbstractControl): ValidationErrors | null => { 
    const error: ValidationErrors = { integer: true }; 

    if (control.value && control.value !== `${parseInt(control.value, 10)}`) { 
     control.setErrors(error); 
     return error; 
    } 

    control.setErrors(null); 
    return null; 
    }; 
} 

sau đó sử dụng nó trong hình thức của bạn:

import { integer } from '...'; 

form.get('yourControl').setValidators([integer()]); 

này sẽ làm việc ngay cả với đầu vào của các loại văn bản