title: Display input box on condition in angular reactive form
body: <p>I am making angular 6 application where i am using angular reactive form.</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
  
      &lt;h2&gt;Click the add button below&lt;/h2&gt;
      &lt;button (click)="addCreds()"&gt;Add&lt;/button&gt;
          &lt;div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index"&gt;
            &lt;div [formGroupName]="i" style="display: flex"&gt;
              &lt;select (ngModelChange)="changeAction($event)" formControlName="action"&gt;
                &lt;option *ngFor="let option of options" value="{{option.key}}"&gt; {{option.value}} &lt;/option&gt;
              &lt;/select&gt;
              &lt;input placeholder="Name" formControlName="name"&gt;
              &lt;div *ngIf="showLabel"&gt;
              &lt;input placeholder="Label" formControlName="label"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  
      &lt;pre&gt;
        {{ form ?.value | json }}
      &lt;/pre&gt;
  </code></pre>
  
  <p><strong>Ts:</strong></p>
  
  <pre><code>  form: FormGroup;
    showLabel: boolean = false;
  
    options : any = [ 
      { "key" : "set", "value": "Set" },
      { "key" : "wait", "value": "Wait" },
      { "key" : "go", "value": "Go" }   
      ]
  
    constructor(private fb: FormBuilder) {
      this.form = this.fb.group({
        credentials: this.fb.array([]),
      });
    }
  
    addCreds() {
      const creds = this.form.controls.credentials as FormArray;
      creds.push(this.fb.group({
        action: '',
        name: '',
        label: ''
      }));
    }
  
    changeAction(e) {
      if(e === "set" || e === "go") {
        this.showLabel = true;
      } else {
        this.showLabel = false;
      }
    }
  </code></pre>
  
  <p><strong>Working stackblitz:</strong> <a href="https://stackblitz.com/edit/angular-form-array-example-yksojj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-form-array-example-yksojj</a></p>
  
  <p>In this given example there will be an add button, upon clicking that button you will get a <code>select-box</code> with values as <code>set,wait,go</code> and an input called name.. Upon click over add button the same row will be added and forms each object inside array.</p>
  
  <p>Also you can see an <code>if</code> condition inside html for label,</p>
  
  <pre><code>&lt;div *ngIf="showLabel"&gt;
    &lt;input placeholder="Label" formControlName="label"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The thing <strong>i am in the need</strong> was in the select box if i choose <strong>set or go</strong> then the label needs to displayed otherwise it should not be displayed for which i have written,</p>
  
  <pre><code>  changeAction(e) {
      if(e === "set" || e === "go") {
        this.showLabel = true;
      } else {
        this.showLabel = false;
      }
    }
  </code></pre>
  
  <p><strong>To be clear enough</strong> If the user clicks three times add button then the dropdown and name field alone needs to be displayed for three times whereas if the user selects the value from dropdown as <strong>set or go</strong> then the label input needs to be displayed to that <strong>particular row alone where the dropdown has the value set and go</strong>.. If the selection was <code>wait</code> then there should not be label box for the row which has dropdown value as <code>wait</code>.</p>
  
  <p>Kindly help me to achieve the expected result..</p>