Angular 2: benutzerdefinierte Form Validierung mit Eingabeformatierung

Question

Ich habe eine Situation, wo ich format die Benutzereingabe und dann validate es brauchen.

Ich verwende einen reactive form und erstellt meine custom validation wie unten (relevanten Teile) gesehen:

HTML:

<input type="text" formControlName="invoiceNumber" (blur)="formatInvoiceNumber()" class="form-control"> 
<div *ngIf="this.form.controls['invoiceNumber'].invalid && this.form.controls['invoiceNumber'].touched">Invalid Text</div> 

Controller:

this.form = this.formBuilder.group({ 
      'invoiceNumber': ['', validateInvoiceNumber()], 
     }); 

    formatRoNumber() { 
      var invoiceNumber = this.form.controls['invoiceNumber'].value; 
      //format invoice number 
     } 

Validator:

export function validateInvoiceNumber(): ValidatorFn { 
    return (control: AbstractControl): { [key: string]: any } => { 
     let invoiceNumber = control.value, 
      isValid = true; 

     //validate invoice number 
     return isValid ? null : { validInvoiceNumber: { valid: false } } 
    }; 
} 

Ich komme in Timing-Probleme. Die Formatierung der Eingabe erfolgt nach der Validierung. Wie kann ich Angular anweisen, die formatting und dann validate anzuwenden

Answer 1

Sie können dies mit Formbuilder tun, wenn Sie auch ngModel verwenden, um zu formatieren. Ich habe es erreicht, wie so

<ion-input 
formControlName="fullName" 
type="text" 
[ngModel]="fullName | pipeHere" 
(ngModelChange)="fullName=$event"> 
</ion-input> 

this.customerFields = this.fb.group({ 
    fullName: ['', Validators.compose([ Validators.required, Validators.minLength(11) ])] 
}); 

die (ngModelChange) sein wird, was feuert die Pfeife in die Tat umzusetzen, während die Validierung Feuer wie üblich. Wenn Sie eine benutzerdefinierte Pipe schreiben, können Sie auch eine zusätzliche Validierung zulassen.

Answer 2

Calebs Weg funktioniert aus irgendeinem Grund nicht, und der Validator wird doppelt aufgerufen.

Wenn es jemand hilft, habe ich es so gemacht. Es muss einen besseren Weg geben, es scheint merkwürdig, die Validatoren zu setzen, sie anzuwenden und sie dann für die nächsten Updates zu entfernen ... aber das funktioniert.

Danke Caleb und Deborah für Sie helfen.

Steuerung:

<input type="text" formControlName="invoiceNumber" (blur)="updateAndValidateInvoiceNumber()" class="form-control"> 

Controller:

updateAndValidateInvoiceNumber(): void { 
    let control: AbstractControl = this.form.controls['invoiceNumber']; 
    let newVal = this.invoiceFormatterPipe.transform(control.value); 

    control.patchValue(newVal); 
    control.setValidators(validateInvoiceNumber()); 
    control.updateValueAndValidity(); 
    control.clearValidators(); 
}