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：自定义表单验证输入格式

回答

相关问题