입력 유형 번호 "숫자 값만" 유효성 검사
입력을 확인하려면 어떻게 해야 합니까?type="number"값이 숫자이거나 null인 경우에만 유효(지시 사항 없음)?
숫자만[0-9]그리고 .는 허용되며, "e" 또는 다른 문자는 허용되지 않습니다.
지금까지 시도한 것:
템플릿:
<form [formGroup]="form" novalidate>
<input type="number" formControlName="number" id="number">
</form>
구성요소:
export class App {
form: FormGroup = new FormGroup({});
constructor(
private fb: FormBuilder,
) {
this.form = fb.group({
number: ['', [CustomValidator.numeric]]
})
}
}
사용자 정의 검증자:
export class CustomValidator{
// Number only validation
static numeric(control: AbstractControl) {
let val = control.value;
if (val === null || val === '') return null;
if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };
return null;
}
}
플렁커
문제는 사용자가 숫자("123e" 또는 "abc")가 아닌 것을 입력하면 FormControl의 값이 됩니다.null, 필드가 필요하지 않기를 원하기 때문에 필드가 정말 비어 있는 경우null값이 유효해야 합니다.
크로스 브라우저 지원도 중요합니다(Chrome의 숫자 입력 필드는 사용자가 "e"를 제외하고 문자를 입력할 수 없지만 FireFox와 Safari는 가능합니다).
HTML 파일에서 이와 같은 패턴에 대해 ngIf를 추가할 수 있습니다.
<div class="form-control-feedback" *ngIf="Mobile.errors && (Mobile.dirty || Mobile.touched)">
<p *ngIf="Mobile.errors.pattern" class="text-danger">Number Only</p>
</div>
인.ts파일에 Validators 패턴을 추가할 수 있습니다 -"^[0-9]*$"
this.Mobile = new FormControl('', [
Validators.required,
Validators.pattern("^[0-9]*$"),
Validators.minLength(8),
]);
지시를 사용하면 애플리케이션 전반에 걸쳐 사용할 수 있고 간편해집니다.
HTML
<input type="text" placeholder="Enter value" numbersOnly>
~하듯이.keyCode()그리고..which()사용되지 않습니다. 코드는 다음을 사용하여 코드를 확인합니다..key()참조처
지시:
@Directive({
selector: "[numbersOnly]"
})
export class NumbersOnlyDirective {
@Input() numbersOnly:boolean;
navigationKeys: Array<string> = ['Backspace']; //Add keys as per requirement
constructor(private _el: ElementRef) { }
@HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
if (
// Allow: Delete, Backspace, Tab, Escape, Enter, etc
this.navigationKeys.indexOf(e.key) > -1 ||
(e.key === 'a' && e.ctrlKey === true) || // Allow: Ctrl+A
(e.key === 'c' && e.ctrlKey === true) || // Allow: Ctrl+C
(e.key === 'v' && e.ctrlKey === true) || // Allow: Ctrl+V
(e.key === 'x' && e.ctrlKey === true) || // Allow: Ctrl+X
(e.key === 'a' && e.metaKey === true) || // Cmd+A (Mac)
(e.key === 'c' && e.metaKey === true) || // Cmd+C (Mac)
(e.key === 'v' && e.metaKey === true) || // Cmd+V (Mac)
(e.key === 'x' && e.metaKey === true) // Cmd+X (Mac)
) {
return; // let it happen, don't do anything
}
// Ensure that it is a number and stop the keypress
if (e.key === ' ' || isNaN(Number(e.key))) {
e.preventDefault();
}
}
}
번호 검증을 수행하는 가장 간단하고 효과적인 방법은 (공백과 특수 문자를 제한합니다.)
길이 제한을 원하지 않는다면 maxlength 속성을 제거할 수 있습니다.
HTML
<input type="text" maxlength="3" (keypress)="validateNo($event)"/>
TS
validateNo(e): boolean {
const charCode = e.which ? e.which : e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false
}
return true
}
저도 비슷한 문제가 있었습니다: 저는 필요하지 않은 입력 필드에 숫자와 null을 원했습니다.여러 가지 다양한 변형을 통해 작업했습니다.나는 결국 이것을 결정했는데, 이것은 효과가 있는 것 같습니다.지시를 내리면,ntvFormValidity, 네이티브 유효성이 없고 무효 상태를 ng-invalid로 전환하지 않는 모든 폼 제어에서.
샘플 용도:<input type="number" formControlName="num" placeholder="0" ntvFormValidity>
지시 정의:
import { Directive, Host, Self, ElementRef, AfterViewInit } from '@angular/core';
import { FormControlName, FormControl, Validators } from '@angular/forms';
@Directive({
selector: '[ntvFormValidity]'
})
export class NtvFormControlValidityDirective implements AfterViewInit {
constructor(@Host() private cn: FormControlName, @Host() private el: ElementRef) { }
/*
- Angular doesn't fire "change" events for invalid <input type="number">
- We have to check the DOM object for browser native invalid state
- Add custom validator that checks native invalidity
*/
ngAfterViewInit() {
var control: FormControl = this.cn.control;
// Bridge native invalid to ng-invalid via Validators
const ntvValidator = () => !this.el.nativeElement.validity.valid ? { error: "invalid" } : null;
const v_fn = control.validator;
control.setValidators(v_fn ? Validators.compose([v_fn, ntvValidator]) : ntvValidator);
setTimeout(()=>control.updateValueAndValidity(), 0);
}
}
과제는 폼 컨트롤에서 ElementRef를 가져와 검사할 수 있도록 하는 것이었습니다.@ViewChild가 있다는 것은 알지만, ID로 각 숫자 입력 필드에 주석을 달아서 다른 것으로 전달할 필요는 없었습니다.그래서 ElementRef를 요청할 수 있는 Directive를 만들었습니다.
사파리에서는 위의 HTML 예제에서 Angular는 "abc"와 같은 입력에서 폼 컨트롤이 유효하지 않음을 표시합니다.
이 작업을 다시 수행한다면 숫자 입력 필드에 대한 자체 CVA를 구축할 수 있을 것입니다. 이를 통해 더 많은 제어 기능을 제공하고 간단한 html을 만들 수 있을 것입니다.
이와 같은 것:
<my-input-number formControlName="num" placeholder="0">
폼 하는 더 및 : , 를 할 수 있을 것 providers선언문에 제 지침(및 이 답변)을 업데이트할 수 있도록 알려주시기 바랍니다.
이를 위한 가장 강력하고 일반적인 방법은 값이 숫자로 변환될 수 있는지 확인하는 것입니다.이 경우 검증자를 추가합니다.
numberValidator(control: FormControl) {
if (isNaN(control?.value)) {
return {
number: true
}
}
return null;
}
export class App {
form: FormGroup = new FormGroup({});
constructor(
private fb: FormBuilder,
) {
this.form = fb.group({
number: ['', [numberValidator]]
})
}
}
이를 Validators.min 및/또는 Validators.max와 결합하여 허용된 값을 더욱 제한할 수 있습니다.
가장 쉬운 방법은 이런 도서관을 사용하는 것일 것이고 특히 당신이 원하는.noStrings
export class CustomValidator{ // Number only validation
static numeric(control: AbstractControl) {
let val = control.value;
const hasError = validate({val: val}, {val: {numericality: {noStrings: true}}});
if (hasError) return null;
return val;
}
}
최소 입력을 하고 0부터 9까지의 숫자만 허용합니다.Angular Cli에서 나는 이것이 효과가 있었습니다.
<input type="number" oninput="this.value=this.value.replace(/[^\d]/,'')" min=0>
를 .src/app/shared/validation.tsAngular help에 따르면:
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'
export default class Validation {
numberValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
if (isNaN(control?.value)) {
return {
number: true
}
}
return null;
}
}
ints는 구성 요소에 가져오기를 추가합니다.
import Validation from 'src/app/shared/validation'
init shared class in 구성 요소:
valid: Validation = new Validation()
합니다.numberValidator.FormControl:
editDeviceForm = new FormGroup({
number: new FormControl('', [Validators.required, this.valid.numberValidator]),
})
사용자 지정 검사기에서 정규식을 사용해야 합니다.예를 들어 입력 필드에 9자리만 허용하는 코드는 다음과 같습니다.
function ssnValidator(control: FormControl): {[key: string]: any} {
const value: string = control.value || '';
const valid = value.match(/^\d{9}$/);
return valid ? null : {ssn: true};
}
여기에서 샘플 앱을 살펴봅니다.
가끔은 이런 간단한 것을 시도하는 것이 더 쉽습니다.
validateNumber(control: FormControl): { [s: string]: boolean } {
//revised to reflect null as an acceptable value
if (control.value === null) return null;
// check to see if the control value is no a number
if (isNaN(control.value)) {
return { 'NaN': true };
}
return null;
}
도움이 되길 바랍니다.
코멘트에 따라 업데이트 되었습니다. 당신은 이와 같이 검증자에게 전화해야 합니다.
number: new FormControl('',[this.validateNumber.bind(this)])
내가 하는 구성요소에 validator를 넣을 경우 bind(이것)가 필요합니다.
언급URL : https://stackoverflow.com/questions/45057907/input-type-number-only-numeric-value-validation
'source' 카테고리의 다른 글
| WooCommerce 보관 페이지 호버의 제품 이미지 전환 (0) | 2023.09.23 |
|---|---|
| 어느쪽이 열리는지워드프레스의 ID와 OAuth 플러그인을 추천하십니까? (0) | 2023.09.23 |
| RFC2822 date in moment.js를 변환하려고 할 때 "감각 경고: moment construction back to js Date" (0) | 2023.09.23 |
| 플러그인 내부에서 is_page()를 사용하려면 어떻게 해야 합니까? (0) | 2023.09.23 |
| group_concat을 사용하여 값을 인용하는 방법 (0) | 2023.09.23 |