forms - formgroup - reactive form angular




입력 유형 번호 "숫자 값만"유효성 검사 (3)

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 파일에서 유효성 검사기 패턴을 추가 할 수 있습니다 - "^ [0-9] * $"

this.Mobile = new FormControl('', [
  Validators.required,
  Validators.pattern("^[0-9]*$"),
  Validators.minLength(8),
]);

Reactive Forms (지시어 없음) 만 사용하여 수치가 숫자이거나 null 인 경우에만 type="number" 의 입력을 유효하게하려면 어떻게 유효합니까?
숫자 만 [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]]
    })
  }
}

CustomValidator :

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;
  }
}

Plunker

문제는 숫자 ( "123e"또는 "abc") 가 아닌 무언가를 사용자가 입력 할 때 FormControl의 값이 null 이 될 때 필드가 실제로 필요하지 않다는 것을 명심하십시오. 필드가 실제로 비어 있으면 null 값 유효해야합니다.

크로스 브라우저 지원 또한 중요합니다 (크롬의 숫자 입력 필드는 "e"를 제외하고 사용자가 글자를 입력하는 것을 허용하지 않지만 FireFox와 Safari는 예외입니다).


가장 쉬운 방법은 이와 같은 라이브러리를 사용하는 것입니다. 특히 noStrings 을 true로 noStrings 하는 것이 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;   
      } 
    }

사용자 정의 유효성 검사기에서 정규 표현식을 사용해야합니다. 예를 들어, 다음은 입력 필드에서 9 자리 만 허용하는 코드입니다.

function ssnValidator(control: FormControl): {[key: string]: any} {
  const value: string = control.value || '';
  const valid = value.match(/^\d{9}$/);
  return valid ? null : {ssn: true};
}

여기에서 샘플 앱을 살펴보십시오.

https://github.com/Farata/angular2typescript/tree/master/Angular4/form-samples/src/app/reactive-validator





validation