Zystkmt

pageRangeValidator(control: FormControl) {

    if (control.value === '') {

      this.isValidRange = false;

    }

    if (control.value) {

      const selectedRange = control.value;

      const range = selectedRange.split('-');

      const startingPageIndex = +range[0];

      const endingPageIndex = +range[1];

      const totalPages = this.totalPages;

      if ((startingPageIndex > 0

        && startingPageIndex <= totalPages - 1

        && startingPageIndex < endingPageIndex

        && endingPageIndex > 0

        && endingPageIndex <= totalPages) || (startingPageIndex > 0

          && startingPageIndex <= totalPages

          && startingPageIndex === endingPageIndex

          && endingPageIndex > 0

          && endingPageIndex <= totalPages)) {

        this.isValidRange = true;

        this.pageRange.emit({

          validRange: this.isValidRange,

          preview: this.previewDone,

          value: control.value

        });

        return null;

      } else {

        this.isValidRange = false;

        this.pageRange.emit({

          validRange: this.isValidRange,

          preview: this.previewDone,

          value: control.value

        });

        return false;

      }

    }

    return null;

}

iam creating a form control element which should accept values only between a particular range i used reactiveformsmodule and formcontrol and created it but i want to know wether it is the best way of doing it or use custom directive for this purpose

Of course it is more elegant to do it in a custom directive, specially if you are going to use it multiple times or if you want to keep your component small. The directive should recieves the rages and do its evaluation.