title: Angular reactive forms are passing hidden field to component?
body: <p>When I select dropdown Jobs it is hiding all the client forms as expected. When I pass fields to components it is still passing client fields, which is implemented wrong here.</p>
  <p>main.html</p>
  <pre><code>&lt;form class=&quot;needs-validation&quot; novalidate [formGroup]=&quot;form&quot; (ngSubmit)=&quot;saveClient()&quot;&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
          &lt;label for=&quot;selectedOption&quot;&gt;Client/Jobs&lt;/label&gt;
          &lt;select class=&quot;form-control&quot; formControlName=&quot;selectedOption&quot; [(ngModel)]=&quot;selectedValue&quot;&gt;
            &lt;option *ngFor=&quot;let o of this.dropdownOptions&quot;&gt;
               {{o.val}}
            &lt;/option&gt;
         &lt;/select&gt;
       &lt;/div&gt;  
    &lt;/div&gt;
    &lt;!-- CLient Form--&gt;
    &lt;div class=&quot;form-row&quot; *ngIf=&quot;selectedValue !== 'Jobs'&quot;&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationCustomClientName&quot;&gt;Client Name&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;clientName&quot; placeholder=&quot;Client Name&quot; value=&quot;&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationCustomRName&quot;&gt;Recruitment Agency&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;agencyName&quot; placeholder=&quot;Agency Name&quot; value=&quot;&quot; required&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Jobs Form--&gt;
    &lt;div class=&quot;form-row&quot; *ngIf=&quot;selectedValue == 'Jobs'&quot;&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationCustomJobName&quot;&gt;Job Title&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;jobName&quot; placeholder=&quot;Job Name&quot; value=&quot;&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationCustomSkills&quot;&gt;Skills Required&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;skills&quot; placeholder=&quot;Skills&quot; value=&quot;&quot; required&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>main.ts</p>
  <pre><code>export class AddComponent implements OnInit {
    form: FormGroup;
    dropdownOptions = [];
    selectedValue: string = &quot;&quot;;
    constructor(public fb: FormBuilder, private adminService: AdminService) {
      this.form = this.fb.group({
        clientName: [''],
        agencyName: [''],
        country: [''],
        selectedOption: [''],
        jobName: [''],
        skills:['']
      })
    }
  </code></pre>
  <p>Console logs</p>
  <pre><code>clientName: &quot;&quot;, agencyName: &quot;&quot;}
  </code></pre>