forms - type - javascript input min length




각도 4 폼 검사기-minLength 및 maxLength는 필드 유형 번호에서 작동하지 않습니다. (6)

연락처 양식을 개발하려고하는데 사용자가 길이 10-12 사이의 전화 번호 값을 입력하길 원합니다.

분명히 동일한 유효성 검사가 메시지 필드에서 작동하는데, 그 유일한 숫자 필드는 나에게 문제를 일으킨다.

나는이 대답을 발견했지만 그것은 나를 위해 쓸모가 없다.

다음과 같은 코드가 있습니다.

HTML :

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
      <input type="number" formControlName="phone" placeholder="Phone Number">
      <input type="text" formControlName="message" placeholder="Message">
       <button class="button" type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

TS :

this.myForm = this.formBuilder.group({
     phone: ['',  [Validators.required, Validators.minLength(10), Validators.maxLength(12)]],
     message: ['',  [Validators.required, Validators.minLength(10), Validators.maxLength(100)]]
});`

다중 매개 변수 또는 다중 조건의 형식 유효성 검사는 단일 유효성 검사기로 구성되어야합니다. 그렇지 않으면 관찰 가능하거나 약속 된 오류가 발생합니다.

phone: ['',  Validators.compose([Validators.required,Validators.min(10000000000), Validators.max(999999999999)])],

여기에 길이를 사용하면 안됩니다. min 및 max는 이와 같이 사용자 정의 유효성 검사기를 사용하기 때문에,

var numberControl = new FormControl("", CustomValidators.number({min: 10000000000, max: 999999999999 }))

angular.io/api/forms/Validators


이 작업 샘플 코드를 사용해보십시오.

component.html

<div class="container">
    <form [formGroup]="myForm" 
    (ngFormSubmit)="registerUser(myForm.value)" novalidate>
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls['phone'].valid}">
        <label for="phone">Email</label>
        <input type="phone" formControlName="phone" placeholder="Enter Phone" 
        class="form-control">
        <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('minlength')">
            Your phone must be at least 5 characters long.
        </p>
        <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('maxlength')">
            Your phone cannot exceed 10 characters.
        </p>
        <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('required') && myForm.controls['phone'].dirty">
            phone is required
        </p>
    </div>
    <div class="form-group text-center">
        <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>
    </div>
</form>
</div>

component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

export class AppComponent implements OnInit {
myForm: any;
constructor(
        private formBuilder: FormBuilder
    ) {}

ngOnInit() {
    this.myForm = this.formBuilder.group({
            phone: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
        });
}
}

angular.io/api/forms/Validators 메서드를 사용하여 여러 유효성 검사기를 단일 함수로 구성하십시오.

아래의 .TS 파일을 업데이트하십시오.

this.myForm = this.formBuilder.group({ phone: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(12)])], message: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(100)])] });


업데이트 1 :

phone: ['',  [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]],

다음과 같이 사용하고 완벽하게 작동했습니다.

 phone: ['',  [Validators.required, customValidationService.checkLimit(10000000000,999999999999)]],

customValidationService :

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

export class customValidationService {
   static checkLimit(min: number, max: number): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
            return { 'range': true };
        }
        return null;
    };
  }
}

<div nz-col [nzXs]="24" [nzSm]="12" nz-form-control nzHasFeedback>
                                <nz-input formControlName="password" [nzPlaceHolder]="'password'" [nzType]="'password'" [nzSize]="'large'" (ngModelChange)="validateConfirmPassword()">
                                </nz-input>
                                <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('minlength')">Your password must be at least 5 characters long. </div>
                                <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('maxlength')">Your password cannot exceed 15 characters. </div>
                                <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">Please input your password!</div>
                            </div>




angular4-forms