Angular 2 Reactive form Validator - how to allow null, but when there is input, the input need to be number?

Question

I have this forming group like so:

   channelInfo: this.fb.group({
    youTubeSubs: [null, [Validators.required, CustomValidators.number]],
    instagramFollowers: [null],
    twitterFollowers: [null],
    snapchatFollowers: [null],
    facebookLikes: [null]
  }),

Only the youTubeSubs is required, all the other number is optional. But if there is value, I need to make sure the value to be number using the CustomValidators.number provide by this component: Angular2 Validator

How can I allow null and number validator at the same time? So if value is empty null, it will show error. But if there is value, the error will show if the value is not number?

Answer 1

Just remove the Validators.required when validating the other fields like so..

channelInfo: this.fb.group({
    youTubeSubs: [null, [Validators.required, CustomValidators.number]],
    instagramFollowers: [null, [CustomValidators.number]],
    twitterFollowers: [null, [CustomValidators.number]],
    snapchatFollowers: [null, [CustomValidators.number]],
    facebookLikes: [null, [CustomValidators.number]]
}),