title: Conditional [required] attribute in Angular 9 form - ExpressionChangedAfterItHasBeenCheckedError
body: <p>I have a radio button like so:</p>
  <pre><code>&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
      &lt;div class=&quot;form-group&quot; [ngClass]=&quot;{ 'is-invalid': saCitizen.invalid }&quot;&gt;
  
          &lt;label for=&quot;saCitizen&quot;&gt;
              Do you have South African citizenship?:
          &lt;/label&gt;
  
          &lt;div&gt;
              &lt;div class=&quot;form-check form-check-inline&quot;&gt;
                  &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;saCitizen&quot; id=&quot;saCitizen_yes&quot; [value]=&quot;true&quot; [(ngModel)]=&quot;registration.saCitizen&quot; required #saCitizen=&quot;ngModel&quot;&gt;
                  &lt;label class=&quot;form-check-label&quot; for=&quot;saCitizen_yes&quot;&gt;Yes&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-check form-check-inline&quot;&gt;
                  &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;saCitizen&quot; id=&quot;saCitizen_no&quot; [value]=&quot;false&quot; [(ngModel)]=&quot;registration.saCitizen&quot; required&gt;
                  &lt;label class=&quot;form-check-label&quot; for=&quot;saCitizen_no&quot;&gt;No&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
                              
          &lt;div *ngIf=&quot;saCitizen.errors?.required&quot; class=&quot;invalid-feedback&quot;&gt;
              SA Citizen is required
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I then have a texbox asking for the ID number:</p>
  <pre><code>&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
      &lt;div class=&quot;form-group&quot; [ngClass]=&quot;{ 'is-invalid': idNumber.invalid }&quot;&gt;
  
          &lt;label for=&quot;idNumber&quot;&gt;
              RSA ID Number:
          &lt;/label&gt;
  
          &lt;input id=&quot;idNumber&quot; name=&quot;idNumber&quot; class=&quot;form-control&quot; type=&quot;text&quot; [(ngModel)]=&quot;registration.idNumber&quot; #idNumber=&quot;ngModel&quot; maxlength=&quot;13&quot; minlength=&quot;13&quot; pattern=&quot;^\d{13}$&quot; [required]=&quot;registration.saCitizen&quot; /&gt;
  
          &lt;div *ngIf=&quot;idNumber.errors?.required&quot; class=&quot;invalid-feedback&quot;&gt;
              RSA ID Number is required
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The key part is: <code>[required]=&quot;registration.saCitizen&quot;</code> on the textbox. This gives rise to the following error when I change the radio button:</p>
  <pre><code>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
  </code></pre>
  <p>How do I avoid this error but keep the conditional validation / required aspect?</p>