web-dev-qa-db-ja.com

Angular 4フォームバリデータ-minLengthおよびmaxLengthはフィールドタイプ番号では機能しません

連絡先フォームを作成しようとしています。ユーザーに長さ10〜12の電話番号の値を入力してもらいたいです。

特に同じ検証がMessageフィールドで機能しています。その唯一のnumberフィールド私にトラブルを与えています。

この答えを見つけましたが、私には役に立たない

私は次のようなコードがあります：

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)]]
});`
formsangularvalidationangular4-forms
28
Sangwin Gawande

更新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;
    };
  }
}
12
Sangwin Gawande

この作業サンプルコードを試してください：

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)])]
        });
}
}
7
Chandru

100％うまくいくというトリックがあります。

「数値」ではなく「テキスト」タイプの入力を定義します。

例えば：

<input placeholder="OTP" formControlName="OtpUserInput" type="text">

次に、検証の一部であるパターンを使用します。

好む ：

this.ValidOtpForm = this.formbuilder.group({
             OtpUserInput: new FormControl(
              { value:'', disabled: false },
          [
          Validators.required,
          **Validators.minLength(6),
          Validators.pattern('[0-9]*')**
        ]),
});

つまり、最小の長さに適した入力タイプのテキストを定義し、数値のパターン（検証）も定義して、両方の検証を実現できるようにします。

残りのコード：

<mat-error *ngIf="RegistrationForm.controls['Password'].hasError('minlength')">Use 6 or more characters with a mix of letters</mat-error>
<mat-error *ngIf="ValidOtpForm.controls['OtpUserInput'].hasError('pattern')">Please enter numeric value.</mat-error>
5
nagender pratap chauhan

ここでは長さを使用しないでください。最小および最大の場合は、このようなカスタムバリデータを使用します。

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

Angular2 min/max validators

3
Sajeetharan - MSFT

複数のバリデータでフィールドを検証する場合は、これを試してください

phone: ['', Validators.compose([
        Validators.required, 
        Validators.minLength(10),
        Validators.maxLength(12)])
      ])],
0
Prachi Shah

<input type="number" />を保持し、int値を文字列に変換するだけです。

const phoneControl: FormControl = this.myForm.controls.phone;

// Do not forget to unsubscribe

phoneControl.valueChanges.subscribe(v => {

  // When erasing the input field, cannot read toString() of null, can occur
  phoneControl.setValue((v && v.toString()) || null, { emitEvent: false });
});
0
laurensdewaele
<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>
0
Tabish Zaman

numberフィールドの場合、組み込みのAngular検証を使用して、次のように最小値と最大値valuesを検証できます。

。ts

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

private myNumberFieldMin: number = 1;
private myNumberFieldMax: number = 1000000;

constructor() {
      this.myForm = this.formBuilder.group({
        myNumberField
      })

this.myForm.controls.myNumberField.setValidators([
  Validators.min(this.myNumberFieldMin),
  Validators.max(this.myNumberFieldMax)
]);

html

<form [formGroup]="myForm">
  <input type="number" formControlName="myNumberField">

  <div *ngIf="this.myForm.controls['myNumberField'].errors && this.myForm.controls['myNumberField'].errors.min">
    <span class="error-message">Value must be at least {{myNumberFieldMin}}</span>
  </div>
  <div *ngIf="this.myForm.controls['myNumberField'].errors && this.myForm.controls['myNumberField'].errors.max">
    <span class="error-message">Maximum value is {{myNumberFieldMax}}</span>
  </div>
</form>
0
Chris Halcrow

Compose（） メソッドを使用して、複数のバリデーターを単一の関数に構成します。

以下のように.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)])] });

0
Jitendra G2

複数のパラメーターまたは複数の条件のフォーム検証は、単一のバリデーターとして構成する必要があります。そうしないと、観察可能なエラーまたはプロミスエラーが発生します。

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