Winkel-2 Benutzerdefinierte Validator: prüft, ob der Eingabe Wert ist eine ganze Zahl?

In einem Angular2 Projekt, das ich bestätigen müssen einige Eingaben.
Wie man sich leicht prüfen, ob eine Eingabe Wert ist eine ganze Zahl?

Versuchte ich mit Number(control.value) gibt 0 für ein leeres Feld - nicht gut.

oder parseInt(control.value,10) die dis-hält Räume:

Wenn ich sowas haben: 1 Raum 0,24 = 1 ,024 es gibt 1 - die Pässe der validator keine Fehler.

Lodash Funktionen wie: _.isInteger(control.value) oder _.isNumeric(control.value)
//return false every time -was zu erwarten ist, da eine Eingabe Wert ist eine Zeichenfolge, keine Zahl.

Methoden kombinieren, wie dies schafft eine chaotisch-Funktion mit vielen if/else-Anweisungen, und selbst dann, ich bin nicht sicher, ob ich die ganzen edge-Fällen. Ich brauche definitiv mehr straight-forward Ansatz. Irgendwelche Ideen?

InformationsquelleAutor AIon | 2016-09-30
  1. 6

    Dies ist der sauberste Weg die ich bisher gefunden:

    app.component.html:

    <input formControlName="myNumber">

    app.Komponente.ts:

    export class AppComponent {
    myNumber:FormControl

    constructor(private _ValidatorsService: ValidatorsService){
    }

    this.myNumber= new FormControl('defaultValue',
        [ Validators.required, this._ValidatorsService.isInteger ]);
}

    Prüfungen.service.ts:

    function check_if_is_integer(value){
   //I can have spacespacespace1 - which is 1 and validators pases but
   //spacespacespace doesn't - which is what i wanted.
   //1space2 doesn't pass - good
   //of course, when saving data you do another parseInt.

   return ((parseFloat(value) == parseInt(value)) && !isNaN(value));

}

@Injectable()
export class ValidatorsService {

   public isInteger = (control:FormControl) => {

        //here, notice we use the ternary operator to return null when value is the integer we want.
        //you are supposed to return null for the validation to pass.

        return check_if_is_integer(control.value) ? null : {
           notNumeric: true
        }
   }

}

    Genießen!

    • if(condition){ return true; } else { return false; } ? 🙂 Hast du nicht meine return (condition); ?
    • return (parseFloat(value) == parseInt(value)) && !isNaN(value)? #SorryForTheCodeGolfOCD
    • danke, habe ich geändert. Dieser Beitrag wurde vor langer Zeit, als ich nicht wusste, viel Programmierung. Jetzt bin ich mit Haskell und Ulme und andere schöne funktionale Zeug - und suchen zu diesem chaotisch-Typoskript-code gibt mir Kopfschmerzen :)) Wenn jemand fragt - ist nicht von mir. Ich war nicht hier :))
    InformationsquelleAutor AIon
  2. 2

    Einfach erstellen Sie eine benutzerdefinierte validator:

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

export function integer(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const error: ValidationErrors = { integer: true };

    if (control.value && control.value !== `${parseInt(control.value, 10)}`) {
      control.setErrors(error);
      return error;
    }

    control.setErrors(null);
    return null;
  };
}

    dann verwenden Sie es in Ihrem Formular:

    import { integer } from '...';

form.get('yourControl').setValidators([integer()]);

    dies funktioniert auch mit inputs vom Typ text

    InformationsquelleAutor Francesco Borzi
Schreibe einen Kommentar