Angular 2：使用输入格式自定义表单验证

2023年7月31日 242次阅读

我有一种情况,我需要格式化用户输入,然后验证它.

我正在使用反应式表单并创建我的自定义验证,如下所示(相关部分)：

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应用格式然后验证？

最佳答案 如果您还使用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)将像往常一样在验证时激活管道.如果您编写自定义管道,则还可以进行其他验证.

点赞