title: How to make reactive form fields mandatory based on condition at html code in Angular 11
body: <p>I have two select/dropdown fields in my form and second dropdown field renders based on a condition <code>*ngIf=&quot;selectedStdntList?.packages&quot;</code>. But in below code, it stops submit form even if the condition <code>*ngIf=&quot;selectedStdntList?.packages&quot;</code> is not true and second dropdown is not rendered on the screen.</p>
  <p><strong>student-list.component.html</strong></p>
  <pre><code>&lt;form [formGroup]=&quot;moveStudentForm&quot; #formDirective=&quot;ngForm&quot; (ngSubmit)=&quot;moveStudent();&quot;&gt;
      &lt;uitk-form-field&gt;
        &lt;label uitkLabel&gt;Student List:&lt;/label&gt;
        &lt;uitk-select id=&quot;my-required-reactive-select&quot; formControlName=&quot;stdntListCtrl&quot;
          [itemList]=&quot;stdntListDropdown&quot; [showError]=&quot;moveStudentForm?.controls?.stdntListCtrl?.errors?.required&quot;
          defaultLabel=&quot;Please Select&quot; defaultLabelFlag=&quot;true&quot;&gt;
        &lt;/uitk-select&gt;
        &lt;uitk-form-field-error
          *ngIf=&quot;moveStudentForm?.controls?.stdntListCtrl?.errors?.required &amp;&amp; moveStudentForm?.controls?.stdntListCtrl?.touched&quot;&gt;
          &lt;span&gt;Please select student list&lt;/span&gt;
        &lt;/uitk-form-field-error&gt;
      &lt;/uitk-form-field&gt;
  
  
      &lt;uitk-form-field *ngIf=&quot;selectedStdntList?.packages&quot;&gt;
        &lt;label uitkLabel&gt;Package:&lt;/label&gt;
        &lt;uitk-select id=&quot;my-required-reactive-select&quot; formControlName=&quot;moveStudentPackageCtrl&quot; [itemList]=&quot;packagesDropdown&quot;
          [showError]=&quot;moveStudentForm?.controls?.packageCtrl?.errors?.required&quot; defaultLabel=&quot;Please Select&quot;
          defaultLabelFlag=&quot;true&quot;&gt;
        &lt;/uitk-select&gt;
        &lt;uitk-form-field-error
          *ngIf=&quot;moveStudentForm?.controls?.packageCtrl?.errors?.required &amp;&amp; moveStudentForm?.controls?.packageCtrl?.touched&quot;&gt;
          &lt;span&gt;Please select package&lt;/span&gt;
        &lt;/uitk-form-field-error&gt;
      &lt;/uitk-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>student-list.component.ts</strong></p>
  <pre><code>    @Component({
          selector: 'stdnt-list',
          templateUrl: './stdnt-list.component.html',
          styleUrls: ['./stdnt-list.component.scss']
      })
      export class StdntListComponent implements OnInit {
          
          stdntListDropdown: IUITKSelectItemProps[] = [];
          moveStudentForm: FormGroup;
      
          constructor(private dataService: DataService)
              
              this.moveStudentForm = new FormGroup({
                  stdntListCtrl: new FormControl(null, Validators.required),
                  moveStudentPackageCtrl: new FormControl(null, Validators.required),
              });
          }
      
          ngOnInit() {
              this.stdntList = this.dataService.loadStudentData();
          }
          
          moveStudent() {
              ...
          }
      }
  </code></pre>
  <p><strong>Desired output:</strong></p>
  <p>If second field condition <code>*ngIf=&quot;selectedStdntList?.packages&quot;</code> is true then only validator of this field should work, else only first field validator should work and form should be allowed to be submitted.</p>