title: Toggle FormControl in View with Formbuilder Typescript using Angular 8
body: <p>How do I remove elements from a HTML DOM View with NgIf using Typescript, not html? Looking for similar syntax.</p>
  
  <p>Prefer to iterate through an Array in typescript, and remove items from the view, rather than wrapping all 20 formcontrols with NgIf, seems kind of repetitive.</p>
  
  <p>Currently using Formbuilder, not FormArray. This link places style display none, which is not ideal practice in Angular from what I read. Is that true? </p>
  
  <p><a href="https://stackoverflow.com/questions/43025499/angular-2-how-to-hide-controls-using-formgroup?rq=1">Angular 2 -&gt; how to hide controls using FormGroup</a></p>
  
  <p>We have exclusion array, and prefer to disable with foreach in Typescript</p>
  
  <p>Maybe something like this?</p>
  
  <p>This only disables the field, still shows in html View</p>
  
  <pre><code>Object.keys(this.customerForm.controls).forEach(key =&gt; {
       if (this.excludeFormControlArray.indexOf(key) &gt;= 0) {
           this.customerForm.get(key).disable;  // This only disables the field, still shows in html View
  
  
  this.customerForm = this.formBuilder.group({
    'firstName': [null, [Validators.maxLength(50), PhoneNumberValidator]],
    'phoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],
    'streetName': [null, [Validators.maxLength(50), PhoneNumberValidator]],
  
    'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
    'city': [null, [Validators.required, Validators.maxLength(200)]],
    'state': [null, [Validators.maxLength(200)]],
    'zip':[null,[Validators.maxLength(200)]]
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <p>//trying to prevent wrapping each with ngIf, items are placed in special ,location on page, due to UX wireframe specs, NgFor was not entirely possible, html/css view is lot more complicated than this,</p>
  
  <pre><code>&lt;div class = "row"&gt;
      &lt;app-input-textbox  formControlName = "firstName"&gt;&lt;/app-input-textbox&gt;
  &lt;div class = "row"&gt;
  &lt;div class = "column"&gt;
      &lt;app-input-textbox  formControlName = "emailAddress"&gt;&lt;/app-input-textbox&gt;
  &lt;/div&gt;
  &lt;div class = "test"&gt;
      &lt;app-input-textbox  formControlName = "state"&gt;&lt;/app-input-textbox&gt;
      &lt;app-input-textbox  formControlName = "zip"&gt;&lt;/app-input-textbox&gt;
  &lt;/div&gt;
  </code></pre>