title: Angular setValidators(Validators.required) not changing empty control to be invalid
body: <p>I created a Reactive Form on Angular 6.
  Inside the form, I have a nested FormArray. 
  On the HTML side I initialize the inputs array using *ngFor directive.</p>
  
  <p>Above the FormArray, I have a checkBox formControl.
  I want the checkBox value to set/remove the Validators.required respectively.</p>
  
  <p>Note that all of the inputs inside the array of controls, need to be updated by the checkbox changes.</p>
  
  <p>See below how I achieve that.</p>
  
  <p>On checking/unchecking the checkbox, the inputs created by the *ngFor directive supposed to get red on case they are empty - since their validators were updated to include the "required" validator.</p>
  
  <p>But, the problem is, it seems "setValidators(Validators.required)" does not make any change to the controls. The control status remains VALID altought it is empty while required.</p>
  
  <p>ts side:</p>
  
  <pre><code>get UnitFirstMeter() {
  return this.configReportForm.get('unitsFirstMeters');
  </code></pre>
  
  <p>}</p>
  
  <p>ngOnInit(): void {</p>
  
  <pre><code>this.configReportForm = this._fb.group({
    reportType: [''],
    reportPeriod: [],
    firstReport: [false],
    unitsFirstMeters: this._fb.array(this.unitsForReport)
  });
  
  
  this.configReportForm.get('firstReport').valueChanges.subscribe(checkedValue =&gt; {
    const unitsFirstMeters = this.configReportForm.get('unitsFirstMeters');
    console.log(checkedValue);
    console.log((unitsFirstMeters as FormArray).controls);
    if (checkedValue) {
      (unitsFirstMeters as FormArray).controls.forEach(c =&gt; {
        c.setValidators(Validators.required);
        console.log(c.status);
      })
    } else {
      (unitsFirstMeters as FormArray).controls.forEach(c =&gt; {
        c.clearValidators();
        console.log(c.status);
      });
    }
    (unitsFirstMeters as FormArray).controls.forEach(c =&gt; {
      c.updateValueAndValidity();
    });
  });
  </code></pre>
  
  <p>}</p>
  
  <p>HTML side:</p>
  
  <pre><code>&lt;form class="text-right myFont" [formGroup]="configReportForm"&gt;
      &lt;div class="form-group "&gt;
          &lt;label&gt;Rport Type&lt;/label&gt;
          &lt;select class="form-control" style="direction:rtl" formControlName="reportType"&gt;
              &lt;option value="" style="direction:rtl"&gt;בחר את סוג הדו"ח&lt;/option&gt;
              &lt;option value="{{type.typeId}}" style="direction:rtl" *ngFor="let type of reportTypes"&gt;{{type.typeName}}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;Report month and year&lt;/label&gt;
          &lt;input type="month" class="form-control" formControlName="reportPeriod"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;div class="d-flex justify-content-end"&gt;
              &lt;label&gt;This is my first report&lt;/label&gt;
              &lt;input type="checkbox" formControlName="firstReport" class="ml-2 mt-1"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div formArrayName="unitsFirstMeters"&gt;
  
          &lt;div *ngFor="let unit of unitsForReport; let i = index" class="form-group form-row" &gt;
              &lt;input type="number" class="col-9 text-right form-control" formControlName="{{i}}"
              [class.is-invalid]="UnitFirstMeter.at(i).invalid"&gt;
              &lt;label class="col-3 col-form-label"&gt;{{unit.unitName}}&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button class="btn myFont btn-warning" type="submit"&gt;Create&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>