bietkul / react-reactive-form

Angular like reactive forms in React.
MIT License
309 stars 32 forks source link

this.asyncValidator is not a function #12

Closed ngunawan closed 6 years ago

ngunawan commented 6 years ago

When using FormBuilder, I seem to be getting 'this.asyncValidator is not a function' error,

form = FormBuilder.group({
    id: ["", customValidator, {updateOn:"blur"}]
})
model.js?3f15:638 Uncaught TypeError: this.asyncValidator is not a function
    at FormControl._runAsyncValidator (model.js?3f15:638)
    at FormControl.updateValueAndValidity (model.js?3f15:292)
    at FormControl.setValue (model.js?3f15:992)
    at Object.FormControl._this2.onChange [as change] (model.js?3f15:936)
    at HTMLInputElement.eventProxy (preact.js?10a9:97)

currently fixing it by adding a placeholder asyncValidator that doesn't do anything like so

sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
asyncValidator = (control) => {
  return sleep(1000).then(() => {
    return null
  });
};

form = FormBuilder.group({
    id: ["", customValidator, asyncValidator, {updateOn:"blur"}]
})

Is this behavior intended?

bietkul commented 6 years ago

Hi @ngunawan Yes, this behavior is intended with form builder. If you don't want to use asyncValidator then you can do something like that.

["", customValidator, null, {updateOn:"blur"}]

Or

["", customValidator,  , {updateOn:"blur"}]