Home > Blockchain >  Error when using my own validator (Angular, Reactive-Forms)
Error when using my own validator (Angular, Reactive-Forms)

Time:01-04

This is my piece of code, when I try to use an own validator, to make sure, the name does not contain numbers:

ngOnInit() {
// HERE
    this.bewerberForm = new FormGroup({
      'name': new FormControl(null, Validators.required, this.containsNumbers),
      'email': new FormControl(null, [Validators.required, Validators.email]),
    ...

  }

  containsNumbers(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve, reject) => {
      for (let i = 0; i < control.value.length; i  ) {
        if (control.value.charAt(i).match('[0-9]')) {
          resolve({ 'nameIsForbidden': true });
          break;
        } else {
          resolve(null);
        }
      }
    });
    return promise;
  }

I get the following error, which I don't understand, since I already did that in another project:

No overload matches this call.
  Overload 1 of 5, '(value: FormControlState<null> | null, opts: FormControlOptions, asyncValidator: AsyncValidatorFn | AsyncValidatorFn[]): FormControl<...>', gave the following error.
    Type '(control: AbstractControl<any, any>) => ValidationErrors | null' has no properties in common with type 'FormControlOptions'.
  Overload 2 of 5, '(value: FormControlState<null> | null, validatorOrOpts?: FormControlOptions | ValidatorFn | ValidatorFn[] | null | undefined, asyncValidator?: AsyncValidatorFn | ... 2 more ... | undefined): FormControl<...>', gave the following error.
    Argument of type '(control: FormControl<any>) => Promise<any> | Observable<any>' is not assignable to parameter of type 'AsyncValidatorFn | AsyncValidatorFn[] | null | undefined'.
      Type '(control: FormControl<any>) => Promise<any> | Observable<any>' is not assignable to type 'AsyncValidatorFn'.
        Types of parameters 'control' and 'control' are incompatible.
          Type 'AbstractControl<any, any>' is missing the following properties from type 'FormControl<any>': defaultValue, registerOnChange, registerOnDisabledChangets(2769)

CodePudding user response:

'name': new FormControl(null, Validators.required, this.containsNumbers),

should be

'name': new FormControl(null, [Validators.required, this.containsNumbers]),

Validators are passed in an array, just like you did in the email control.

  • Related