Question

我的情况是我需要format用户输入，然后是validate它。

我正在使用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？

Answer 1

如果您还使用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）将在验证像往常一样触发时激活管道。如果您编写自定义管道，也可以允许进行其他验证。

Answer 2

由于某种原因，Caleb的方式对我不起作用，并且验证器被调用两次。

如果它对任何人有帮助，我最终都是这样做的。必须有一个更好的方法，setValidators似乎很奇怪，应用它们，然后将它们删除以进行下一次更新......但这样可行。

谢谢Caleb和Deborah的帮助。

控制：

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

Answer 3

在您的formgroup中，为该formControl添加以下模式：

-variable_name: ['', [Validators.pattern(/^[.\d]{1,15}$/)]]

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

3 个答案: