title: Angular 7 - Validate input field only if checkbox is checked
body: <p>I'm using angular 7 and I have a form with two input fields, while the first one is always required, the second one should be required only if a checkbox is checked.</p>
  
  <p>I'm trying to use a FormGroup with a custom validator: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="exampleForm"&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="first" formControlName="first"&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-checkbox [(ngModel)]=" checked" [ngModelOptions]="{standalone:true}"&gt;Make second input field required&lt;/mat-checkbox&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="second" formControlName="second"&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>exampleForm: FormGroup;
  checked: boolean;
  
  ngOnInit() {
    this.exampleForm = new FormGroup({
      'second': new FormControl('', [this.validateIfChecked()]),
      'first': new FormControl('example', [Validators.required])
    });
  }
  
  
  validateIfChecked(): ValidatorFn {
    return (control: AbstractControl): {
      [key: string]: any
    } | null =&gt; {
      if (this.checked) {
        return control.value ? null : {
          'err': true
        };
      }
      return null;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that the validation is performed only when the text in the two input fields is updated, while if I check/uncheck the checkbox the state doesn't change and to force the validation I have to change the text in the second textbox.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-hugk2j" rel="noreferrer">Here</a> you can see an example on stackblitz: if you check the checkbox, the status doesn't change.</p>
  
  <p>How can can I force the validation when the checkbox status changes?</p>