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

发布时间：2020-12-17 17:09:35 所属栏目：安全来源：网络整理

导读：我有一种情况,我需要格式化用户输入,然后验证它. 我正在使用反应式表单并创建我的自定义验证,如下所示(相关部分)： HTML： input type="text" formControlName="invoiceNumber" (blur)="formatInvoiceNumber()" class="form-control"div *ngIf="this.form.co

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!