wake-up-neo.net

Min/Max-Validator in Winkel 2 Finale

Laut thoughtgram.io lauten die derzeit unterstützten Validatoren:

  • erforderlich
  • minimale Länge
  • maximale Länge
  • muster

Betrachten Sie den folgenden Code ( 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!"; 
}

Während minlength unterstützt wird, wird min="0" von der Winkelprüfung ignoriert:

 enter image description here

 enter image description here

Muss das Formular also einen Fehler ergeben, wenn firstValue ngModel <0 ist, muss ein benutzerdefinierter Validator erstellt werden?

24
David

Bewerben min/max validation Auf einem number müssen Sie einen Custom Validator

Validators Klasse haben derzeit nur wenige Validatoren, nämlich

  • erforderlich
  • requiredTrue
  • Minimallänge
  • maxlength
  • Muster
  • nullValidator
  • komponieren
  • composeAsync

Validator: Hier ist eine abgeschwächte Version meines Nummernvalidators, den Sie nach Belieben verbessern können

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

Verwendung:

// 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

Ich habe eine Bibliothek gefunden, die viele benutzerdefinierte Validatoren implementiert - ng2-validation -, die mit vorlagengesteuerten Formularen (Attributrichtlinien) verwendet werden können. Beispiel:

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

Sie können Ihre eigene Validierung (vorlagengesteuert) problemlos implementieren, indem Sie eine Direktive erstellen, die die Validator-Schnittstelle implementiert.

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



  }

}
8
amd

Soweit ich weiß, ist es jetzt implementiert, überprüfen Sie https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts .

Dies ist der Teil, der das implementiert, wonach Sie suchen:

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

Ich suchte jetzt das Gleiche, benutzte this , um es zu lösen.

Mein Code:

this.formBuilder.group({
  'feild': [value,  [Validators.required, Validators.min(1)]]
});
5
shlomiLan
  1. Wechseln Sie zur Verwendung von reaktiven Formularen anstelle von Vorlagenformularen (sie sind einfach besser), andernfalls wird Schritt 5 etwas anders sein. 
  2. Erstellen Sie einen Service NumberValidatorsService und fügen Sie Prüferfunktionen hinzu: 

    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. Dienst in das Modul importieren.

  4. Fügen Sie die include-Anweisung in der Komponente ein, in der sie verwendet werden soll: 

        import { NumberValidatorsService } from "app/common/number-validators.service";
    
  5. Fügen Sie dem Formularersteller Validatoren hinzu: 

        this.myForm = this.fb.group({
          numberInputName: [0, [Validators.required, NumberValidatorsService.max(100), NumberValidatorsService.min(0)]],
        });
    
  6. In der Vorlage können Sie die Fehler wie folgt anzeigen: 

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

Angular unterstützt jetzt standardmäßig Min/Max-Prüfer.

Angular bietet standardmäßig die folgenden Überprüfungen. Fügen Sie die Liste hier hinzu, damit Neulinge die aktuell unterstützten Standardvalidatoren leicht kennenlernen und sie entsprechend ihrem Interesse weiter googeln können.

  • min
  • max
  • erforderlich
  • requiredTrue
  • E-Mail
  • minLength
  • maxLength
  • Muster
  • nullValidator
  • komponieren
  • composeAsync

sie erhalten die vollständige Liste Angular Validators

Verwendung des Min/Max-Validators: Aus der Dokumentation von Angular -

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

min () / max () ist eine statische Funktion, die akzeptiert einen Zahlenparameter und gibt eine Validierungsfunktion zurück, das eine Fehlerkarte mit dem min / max Eigenschaft, wenn die Validierungsprüfung fehlschlägt, sonst null.

benutze min validator in formControl, (für weitere Infos hier klicken )

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

benutze max validator in formControl, (für weitere Infos hier klicken )

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

manchmal müssen wir Validator dynamisch hinzufügen. setValidators () ist der Retter. Sie können es wie folgt verwenden -

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

Angular 6 unterstützt min & max Validatoren: https://angular.io/api/forms/Validators

Sie können diese für statische und dynamische Werte verwenden.

Statisch:

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

Dynamisch:

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

Ich habe dies als Lösung gefunden. Erstellen Sie einen benutzerdefinierten Prüfer wie folgt

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

und unter Konstruktor enthalten Sie den folgenden Code

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

dabei ist customForm eine FormGroup und _builder ein FormBuilder.

3
Kirubel

VERWENDEN

Validators.min(5)

Es kann beim Erstellen einer formGroup-Variablen zusammen mit anderen Validatoren wie in verwendet werden

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

Nicht sicher, ob es in Angular 2 ist, aber verfügbar in Angular 5

1

Offensichtlich hatte Angular die max/min-Direktiven für vorlagengesteuerte Formulare zu einem bestimmten Zeitpunkt, musste sie jedoch in Version 4.2.0 entfernen. Sie können hier über die Regression lesen, die die Entfernung verursacht hat: https://github.com/angular/angular/issues/17491

Derzeit ist die einzige funktionierende Lösung, die ich kenne, die Verwendung der benutzerdefinierten Direktive, wie von @AMD vorgeschlagen. So verwenden Sie es mit 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)    
  }
}

Und in deiner Vorlage:

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

Hoffe das hilft!

1

Angular hat min und max Validatoren, jedoch nur für reaktive Formen. Wie es in den Dokumenten heißt: "Der Validator existiert nur als Funktion und nicht als Direktive."

Um diese Validatoren in vorlagengesteuerten Formularen verwenden zu können, müssen Sie benutzerdefinierte Anweisungen erstellen. In meiner Implementierung verwende ich @HostBinding, um auch die HTML min/max- Attribute anzuwenden. Meine selectors sind auch sehr spezifisch, um zu verhindern, dass die Validierung für benutzerdefinierte Formularsteuerelemente ausgeführt wird, die ControlValueAccessor mit einer min - oder max -Eingabe implementieren (z. B. MatDatePickerInput )

min-validator:

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

max-validator:

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

In den neuesten Angular-Versionen sind min und max bereits hinzugefügt. Hier ist der Link: https://angular.io/api/forms/Validators#max

So habe ich Max Validator in meinem Projekt verwendet:

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

Initialisieren Sie die Formularsteuerung und fügen Sie den Prüfer in der Komponente hinzu:

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

Sie können den Validator auch für ein Ereignis wie folgt dynamisch festlegen:

  quantityFormControl = new FormControl();

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

Ich hoffe es hilft.

0
Sachin Parashar