Angular 2：自定義表單驗證輸入格式

我有一種情況，我需要format用戶輸入，然後validate它。Angular 2：自定義表單驗證輸入格式

我使用的是reactive form並創建了custom validation如下（相關部分）看出：

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>

控制器：

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

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

驗證：

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

我遇到了計時問題。輸入的格式化發生在驗證之後。

我該如何告訴Angular應用formatting然後validate？

來源

2017-04-18 Thibs

貌似要格式化的模糊......所以，當用戶離開現場。默認情況下，驗證在用戶輸入時發生。所以你希望它在用戶離開該領域時進行驗證？然後考慮不使用內置驗證（不在FormBuilder中指定它），而是直接調用它。如果您希望在格式化後發生這種情況，您可以從formatInvoiceNumber（）中調用它。 – DeborahK

@DeborahK，我明白了。我希望有一種方法可以使這個工作與FormBuilder ...或以其他方式運行格式。謝謝你 – Thibs

如果你想格式化，你可以在valueChanges上添加一個手錶，然後格式化/驗證。 – DeborahK

如果您還使用ngModel進行格式化，您可以使用formbuilder來做到這一點。我喜歡這樣

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

的（ngModelChange）來完成它將會是什麼觸發你的管道進入，同時驗證火災如常行動。如果您編寫自定義管道，則還可以進行其他驗證。

來源

2017-04-18 22:34:50

由於某種原因，Caleb的方式不適合我，並且驗證器被調用兩次。

如果它對任何人有幫助，我最終會這樣做。必須有更好的方法，對setValidators來說看起來很奇怪，應用它們，然後刪除它們以便下次更新...但這是有效的。

謝謝你迦勒和德博拉爲你提供幫助。

控制：

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

控制器：

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

來源

2017-04-21 17:52:58 Thibs

Angular 2：自定義表單驗證輸入格式

回答

相關問題