web-dev-qa-db-ja.com

Angular 2 Finalの最小/最大検証

thoughtgram.io によると、現在サポートされているバリデーターは次のとおりです。

  • 必須
  • 最小長
  • 最大長
  • パターン

したがって、次のコードを考慮してください（ plunkr here ）：

@Component({
  selector: 'my-app',
  template: `

  <form #formRef="ngForm">
    <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
    <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>
    <button type="submit"> Submit </button> 
  </form>

  FORM: {{formRef.form | json }}
`
})
export class AppComponent { 
  firstValue = -22;
  secondValue = "eyy macarena!"; 
}

minlengthはサポートされていますが、angular検証ではmin="0"は無視されます。

enter image description here

enter image description here

したがって、firstValue ngModel <0のときにフォームをエラーにするには、カスタムバリデーターを作成する必要がありますか？

validationangulartypescriptangular2-forms
34
David

min/max validationをnumberに適用するには、Custom Validatorを作成する必要があります

バリデータ クラスには現在、いくつかのバリデータしかありません。

  • 必須
  • requiredTrue
  • minlength
  • maxlength
  • パターン
  • nullValidator
  • compose
  • composeAsync

バリデーター：ここに私の番号バリデーターのトーンダウンバージョンがあり、あなたは好きなように改善することができます

static number(prms = {}): ValidatorFn {
    return (control: FormControl): {[key: string]: string} => {
      if(isPresent(Validators.required(control))) {
        return null;
      }

      let val: number = control.value;

      if(isNaN(val) || /\D/.test(val.toString())) {

        return {"number": true};
      } else if(!isNaN(prms.min) && !isNaN(prms.max)) {

        return val < prms.min || val > prms.max ? {"number": true} : null;
      } else if(!isNaN(prms.min)) {

        return val < prms.min ? {"number": true} : null;
      } else if(!isNaN(prms.max)) {

        return val > prms.max ? {"number": true} : null;
      } else {

        return null;
      }
    };
  }

使用法：

// check for valid number
var numberControl = new FormControl("", [Validators.required, CustomValidators.number()])

// check for valid number and min value  
var numberControl = new FormControl("", CustomValidators.number({min: 0}))

// check for valid number and max value
var numberControl = new FormControl("", CustomValidators.number({max: 20}))

// check for valid number and value range ie: [0-20]
var numberControl = new FormControl("", CustomValidators.number({min: 0, max: 20}))
44
Ankit Singh

多くのカスタムバリデーターを実装しているライブラリを見つけました- ng2-validation -テンプレート駆動型フォーム（属性ディレクティブ）で使用できます。例：

<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="someNumber.errors?.range">Must be in range</p>
30
David

Validatorインターフェイスを実装するディレクティブを作成することにより、独自の検証（テンプレート駆動）を簡単に実装できます。

import { Directive, Input, forwardRef } from '@angular/core'
import { NG_VALIDATORS, Validator, AbstractControl, Validators } from '@angular/forms'

@Directive({
  selector: '[min]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]
})
export class MinDirective implements Validator {

  @Input() min: number;

  validate(control: AbstractControl): { [key: string]: any } {

    return Validators.min(this.min)(control)

    // or you can write your own validation e.g.
    // return control.value < this.min ? { min:{ invalid: true, actual: control.value }} : null



  }

}
11
amd

this を使用して、同じことを探していました。

私のコード：

this.formBuilder.group({
  'feild': [value,  [Validators.required, Validators.min(1)]]
});
10
shlomiLan

私の知る限り、今では実装されていますか、チェックしてください https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts

これは、探しているものを実装する部分です。

 export class Validators {
  /**
   * Validator that requires controls to have a value greater than a number.
   */
  static min(min: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
        return null;  // don't validate empty values to allow optional controls
      }
      const value = parseFloat(control.value);
      // Controls with NaN values after parsing should be treated as not having a
      // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
      return !isNaN(value) && value < min ? {'min': {'min': min, 'actual': control.value}} : null;
    };
  }

  /**
   * Validator that requires controls to have a value less than a number.
   */
  static max(max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
        return null;  // don't validate empty values to allow optional controls
      }
      const value = parseFloat(control.value);
      // Controls with NaN values after parsing should be treated as not having a
      // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
      return !isNaN(value) && value > max ? {'max': {'max': max, 'actual': control.value}} : null;
    };
  }
9
Joshua Simon

どうやら、Angularにはある時点でテンプレート駆動型フォームのmax/minディレクティブがありましたが、v4.2.0ではそれらを削除する必要がありました。削除の原因となった回帰については、こちらをご覧ください： https://github.com/angular/angular/issues/17491

今のところ、私が知っている唯一の実用的なソリューションは、@ AMDが示唆するようにカスタムディレクティブを使用することです。 Bootstrapで使用する方法を次に示します4。

min-validator.directive.ts

import { Directive, Input } from '@angular/core'
import { NG_VALIDATORS, Validator, AbstractControl, Validators } from '@angular/forms'

@Directive({
  selector: '[min]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]
})
export class MinDirective implements Validator {

  @Input() min: number;

  validate(control: AbstractControl): { [key: string]: any } {    
    return Validators.min(this.min)(control)    
  }
}

そしてテンプレートで：

<input type="number" [min]="minAge" #age="ngModel" [(ngModel)]="person.age" class="form-control" [ngClass]="{'is-invalid':age.invalid}">
<div *ngIf="age.invalid && (age.dirty || age.touched)" class="invalid-feedback">You need to be older than {{minAge}} to participate</div>

お役に立てれば！

5
Eugene Kulabuhov
  1. テンプレートフォームの代わりにリアクティブフォームを使用するように切り替えます（それらは単に優れています）。それ以外の場合、手順5はわずかに異なります。

  2. サービスNumberValidatorsServiceを作成し、検証関数を追加します。

    import { Injectable } from '@angular/core';
import { FormControl,  ValidatorFn } from '@angular/forms';

@Injectable()
export class NumberValidatorsService {

 constructor() { }

  static max(max: number): ValidatorFn {
return (control: FormControl): { [key: string]: boolean } | null => {

  let val: number = control.value;

  if (control.pristine || control.pristine) {
    return null;
  }
  if (val <= max) {
    return null;
  }
  return { 'max': true };
  }
}

 static min(min: number): ValidatorFn {
return (control: FormControl): { [key: string]: boolean } | null => {

  let val: number = control.value;

  if (control.pristine || control.pristine) {
    return null;
  }
  if (val >= min) {
    return null;
  }
  return { 'min': true };
  }
}

}

  3. サービスをモジュールにインポートします。

  4. 使用されるコンポーネントにincludeステートメントを追加します。

        import { NumberValidatorsService } from "app/common/number-validators.service";

  5. バリデーターをフォームビルダーに追加します。

        this.myForm = this.fb.group({
      numberInputName: [0, [Validators.required, NumberValidatorsService.max(100), NumberValidatorsService.min(0)]],
    });

  6. テンプレートでは、次のようにエラーを表示できます。

     <span *ngIf="myForm.get('numberInputName').errors.max">
         numberInputName cannot be more than 100. 
  </span>
5
trees_are_great

Angularはデフォルトでmin/maxバリデーターをサポートするようになりました。

Angularはデフォルトで次のバリデーターを提供します。ここにリストを追加して、新しいユーザーが現在サポートされているデフォルトのバリデーターを簡単に知り、興味のあるものとしてさらにグーグルで検索できるようにします。

  • min
  • max
  • required
  • requiredTrue
  • email
  • minLength
  • maxLength
  • pattern
  • nullValidator
  • compose
  • composeAsync

完全なリストを取得します Angular Validators

min/maxバリデータの使用方法：Angularのドキュメントから-

static min(min: number): ValidatorFn 
static max(max: number): ValidatorFn

min（）/max（）は、数値パラメータを受け入れますおよびreturns検証関数検証チェックが失敗した場合はmin/maxプロパティを含むエラーマップ、それ以外の場合はnull。

formControlでminバリデーターを使用します（詳細については、 ここをクリック ）

const control = new FormControl(9, Validators.min(10));

formControlでmaxバリデーターを使用します（詳細については、 ここをクリック ）

const control = new FormControl(11, Validators.max(10));

バリデータを動的に追加する必要がある場合があります。setValidators（）は救世主です。次のように使用できます-

const control = new FormControl(10);
control.setValidators([Validators.min(9), Validators.max(11)]);
3
Sadid Khan

Angular 6はmin＆をサポートmaxバリデーター： https://angular.io/api/forms/Validators

これらを静的および動的な値に使用できます。

静的：

<input min="0" max="5">

動的：

<input [min]="someMinValue" [max]="someMaxValue">
3
garfunkel61

これを解決策として見つけました。次のようにカスタムバリデーターを作成します

minMax(control: FormControl) {
      return parseInt(control.value) > 0 && parseInt(control.value) <=5 ? null : {
        minMax: true
      }
  }

そして、コンストラクタの下に以下のコードを含めます

this.customForm= _builder.group({
                  'number': [null, Validators.compose([Validators.required, this.minMax])],
                });

ここで、customFormはFormGroupであり、_builderはFormBuilderです。

3
Kirubel

つかいます

Validators.min(5)

次のように、formGroup変数を他のバリデータとともに作成するときに使用できます。

dueAmount:['', [Validators.required, Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/), Validators.min(5)]]

Angular 2にあるかどうかはわかりませんが、Angular 5で利用可能です

1
Gauri Kesava Kumar

最新のAngularバージョンでは、minとmaxがすでに追加されています。リンクは次のとおりです。 https://angular.io/api/forms/Validators#max

これは私のプロジェクトでMaxバリデーターを使用した方法です：

<mat-form-field class="globalInput">
          <input (change)="CalculateAmount()" matInput placeholder="Quantity" name="productQuantity" type="number" [formControl]="quantityFormControl">
        </mat-form-field>
        <mat-error *ngIf="quantityFormControl.hasError('max')">
          Only <strong>{{productQuantity}}</strong> available!
        </mat-error>

フォームコントロールを初期化し、コンポーネントにバリデーターを追加します。

  quantityFormControl = new FormControl('', Validators.max(15));

次のようなイベントでバリデーターを動的に設定することもできます。

  quantityFormControl = new FormControl();

OnProductSelected(){
    this.quantityFormControl.setValidators(Validators.max(this.someVariable));
  }

それが役に立てば幸い。

1
Sachin Parashar

Angularには min および max バリデーターがありますが、Reactive Formのみです。ドキュメントにあるように、「バリデータはディレクティブとしてではなく、関数としてのみ存在します。」

これらのバリデータをテンプレート駆動フォームで使用できるようにするには、カスタムディレクティブを作成する必要があります。私の実装では、@HostBindingを使用してHTML min/max- attributesも適用します。私のselectorsは、ControlValueAccessorまたはmin入力でmaxを実装するカスタムフォームコントロールで実行される検証を防止するために非常に具体的です（例 MatDatePickerInput ）

最小バリデーター：

import { Directive, HostBinding, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, Validators } from '@angular/forms';

@Directive({
  selector: 'input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MinValidatorDirective, multi: true }]
})
export class MinValidatorDirective implements Validator {
  @HostBinding('attr.min') @Input() min: number;

  constructor() { }

  validate(control: AbstractControl): ValidationErrors | null {
    const validator = Validators.min(this.min);
    return validator(control);
  }
}

最大バリデーター：

import { Directive, HostBinding, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, Validators } from '@angular/forms';

@Directive({
  selector: 'input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MaxValidatorDirective, multi: true }]
})
export class MaxValidatorDirective implements Validator {
  @HostBinding('attr.max') @Input() max: number;

  constructor() { }

  validate(control: AbstractControl): ValidationErrors | null {
    const validator = Validators.max(this.max);
    return validator(control);
  }
}
0
andbjer