title: Angular 2 Custom Validator with Observable Parameter
body: <p>I have this custom validator:</p>
  
  <pre><code>export const mealTypesValidator = (mealSelected: boolean) =&gt; {
      return (control: FormControl) =&gt; {
          var mealTypes = control.value;
          if (mealTypes) {
              if (mealTypes.length &lt; 1 &amp;&amp; mealSelected) {
                  return {
                      mealTypesValid: { valid: false }
                  };
              }
          }
          return null;
      };
  };
  </code></pre>
  
  <p>If I use it like this it works:</p>
  
  <pre><code>ngOnInit() {
      this.findForm = this.formBuilder.group({
          categories: [null, Validators.required],
          mealTypes: [[], mealTypesValidator(true)],
          distanceNumber: null,
          distanceUnit: 'kilometers',
          keywords: null,
      });
  }
  </code></pre>
  
  <p>The catch is, mealSelected is a property on my component - that changes when the user selects and deselects a meal.</p>
  
  <p>How I call the validator above is using static true which can never change. </p>
  
  <p>How can I get the validator to work when I use the component.mealSelected value as the parameter eg:</p>
  
  <pre><code>ngOnInit() {
      this.findForm = this.formBuilder.group({
          categories: [null, Validators.required],
          mealTypes: [[], mealTypesValidator(this.mealSelected)],
          distanceNumber: null,
          distanceUnit: 'kilometers',
          keywords: null,
      });
  }
  </code></pre>
  
  <p>Because if i do it as above, it evaluates <code>this.mealSelected</code> instantly which is false at the time - and then when the user selects a meal, it doesn't then go ahead and pass true into the custom validator.</p>