title: Set one of two Angular Material select to required based on a condition
body: <p>I have a simple form which operates on the logic of:</p>
  
  <p>Select Box 1 (Yes/No)</p>
  
  <p>Select Box 2 (Show if Yes)
  Select Box 3 (Show if No)</p>
  
  <p>Only the shown selection box should be set to required, the other is not required. </p>
  
  <pre><code>&lt;mat-select placeholder='Show First Options' formControlName='b' [(ngModel)]="view"&gt;
      &lt;mat-option [value]="'first'"&gt;
         First
      &lt;/mat-option&gt;
      &lt;mat-option  [value]="'second'"&gt;
        Second
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt; 
  
  &lt;mat-form-field *ngIf="view === 'first'"&gt;
    &lt;mat-select       
        placeholder='First Items' 
        formControlName='one'
        [required]="view === 'first'"&gt;
      &lt;mat-option *ngFor="let item of items1" [value]="item"&gt;
        {{item}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field *ngIf="view === 'second'"&gt;
    &lt;mat-select
        placeholder='Second Items'
        formControlName='two'
        [required]="view === 'second'"&gt; 
      &lt;mat-option *ngFor="let item of items2" [value]="item"&gt;
        {{item}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>This works fine for the first, default select box. However, when you change to the second box, the first box seems to keep its required validator. </p>
  
  <p>I have written a demo to demonstrate this:
  <a href="https://stackblitz.com/edit/angular-9eoffq" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9eoffq</a></p>
  
  <p>How can I ensure only the viewed select box is required?</p>