Question

我将在角度4中实现验证。

我已经有了解决方案但需要简单干净的代码。

这是我的代码。

移动auth.component.ts

this.appForm = fb.group({
     'otp': ['', Validators.compose([Validators.required, ValidationService.digit4Validator])],
});

validation.service.ts

...
static digit4Validator(control) {
    if (control.value) {
       if (control.value.match(/^\d+/) && control.value.length === 4) {
           return null;
       } else {
           return {'invalid4DigitCode': true};
       }
    }
}
...

如果您有任何好的解决方案，请告诉我。

Answer 1

您的验证者只应验证它是否为有效号码。 Angular已经提供了一个应该使用的minlength验证器。

Answer 2

您可以重构您的验证器：

export function digitValidator(length: number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    if (control.value) {
       if (control.value.match(/^\d+/) && control.value.length === length) {
           return null;
       } else {
           return {`invalidDigitCode, length should be ${length}`: true};
       }
    }
  };
}
...
this.appForm = fb.group({
     'otp': ['', Validators.compose([Validators.required, 
                 Validators.digitValidator(4)])
...

或者您可以这样使用：

this.appForm = fb.group({
     'otp': ['', Validators.compose([Validators.required, 
                 Validators.minLength(4), 
                 Validators.maxLength(4)])],
});

angular4中的几位数验证

2 个答案: