title: Angular 4 Reactive Forms Toggle Validation for Hidden Form Elements
body: <p>I have a reactive form where on load no fields are required. If an option is selected that will add additional form elements into the formGroup then the new shown fields will be all required. 
  If the nickname field is hidden then you should be able to submit the form just fine. If the nickname is shown then the nickname field is required and the submit button is disabled until the nickname field is full.
  Here is a sample of what I want to do.</p>
  
  <p>My question is, how can I enable/disable validation once the form element is shown/hidden?</p>
  
  <p>App.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  import { AppComponent } from './app.component';
  import { HelloComponent } from './hello.component';
  
  @NgModule({
    imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
    declarations: [ AppComponent, HelloComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>App.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit  {
    name = 'My Reactive Form';
  
    constructor(
      private fb: FormBuilder
    ) {}
  
    myForm: FormGroup;
    showNick: boolean = false;
  
    ngOnInit() {
      this.myForm = this.fb.group({
        'firstName': new FormControl(),
        'nickName': new FormControl('', Validators.required),
        'lastName': new FormControl()
      })
    }
  
    toggleNick() {
      this.showNick = !this.showNick;
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;form [formGroup]="myForm"&gt;
    &lt;div class="my-box"&gt;
      &lt;label&gt;
        First Name
        &lt;input type="text" formControlName="firstName"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="my-box nickname"&gt;
      Nickname? &amp;nbsp; &lt;a (click)="toggleNick()"&gt;yes / no&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="my-box" *ngIf="showNick"&gt;
      &lt;label&gt;
        Nickname
        &lt;input type="text" formControlName="nickName"&gt;
        &lt;span class="validation-message" *ngIf="!myForm.controls['nickName'].valid &amp;&amp; myForm.controls['nickName'].dirty"&gt;
      This field is invalid
    &lt;/span&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="my-box"&gt;
      &lt;label&gt;
        Last Name
        &lt;input type="text" formControlName="lastName"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;button [disabled]="myForm.invalid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>