title: Angular adding form controls to reactive forms
body: <p>Im am trying to have a textarea required when the the radio option Yes is choosen, but it does sort of work </p>
  
  <p>if i choose Yes i get </p>
  
  <blockquote>
    <p>RangeError: Maximum call stack size exceeded</p>
  </blockquote>
  
  <p>if i choose No then Yes i get  </p>
  
  <blockquote>
    <p>Cannot find control with unspecified name attribute</p>
  </blockquote>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
  import {Router} from '@angular/router';
  import {SorDataService} from '../sor-data.service';
  
  @Component({
    selector: 'app-intervention-strategies',
    templateUrl: './intervention-strategies.component.html',
    styleUrls: ['./intervention-strategies.component.css']
  })
  export class InterventionStrategiesComponent implements OnInit {
  
    public form: FormGroup;
  
    /** Page 5 */
    constructor(public data: SorDataService, private formBuilder: FormBuilder, private router: Router) {
    }
  
    public ngOnInit() {
  
      this.form = this.formBuilder.group({
        csc_dynamicsecurity: [null, Validators.required],
      });
  
      this.form.valueChanges.subscribe(values =&gt; {
  
        if (values['csc_dynamicsecurity'] === true) {
          this.form.addControl('csc_dynamicsecurityexplanation', new FormControl('', Validators.required)); // Add new form control
        }
        else if (values['csc_dynamicsecurity'] === false) {
          this.form.removeControl('csc_dynamicsecurityexplanation');
        }
      });
    }
  
    public next() {
  
      if (this.form.valid) {
        alert('valid');
      }
    }
  }
  </code></pre>
  
  <p>Trying to add form validation to a field that is conditionally added to the form</p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
  
    &lt;div class="app-radio-field app-field-required" [ngClass]="displayFieldCss('csc_dynamicsecurity')"&gt;
  
      &lt;h5 i18n&gt;Dynamic Security and Staff Presence?&lt;/h5&gt;
  
      &lt;mat-radio-group [formControl]="form.get('csc_dynamicsecurity')"&gt;
        &lt;mat-radio-button color="primary" [value]="true"
                          i18n&gt;Yes
        &lt;/mat-radio-button&gt;
  
        &lt;mat-radio-button color="primary" [value]="false"
                          i18n&gt;No
        &lt;/mat-radio-button&gt;
      &lt;/mat-radio-group&gt;
    &lt;/div&gt;
  
    &lt;mat-form-field class="full-width" *ngIf="form.get('csc_dynamicsecurity').value === true"&gt;
    &lt;textarea matTextareaAutosize matInput required i18n-placeholder placeholder="Explain"
              [formControl]="form.get('csc_dynamicsecurityexplanation')"&gt;&lt;/textarea&gt;
    &lt;/mat-form-field&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I also tried adding <code>&amp;&amp; this.form.get('csc_dynamicsecurityexplanation')</code> to the subscribe as i had sen others suggest and this seems to fix the stack error but i still get the below error .. Im not quite sure im doing this right .. any help is appriciated</p>
  
  <blockquote>
    <p>Cannot find control with unspecified name attribute</p>
  </blockquote>
  
  <pre><code>    this.form.valueChanges.subscribe(values =&gt; {
  
        if (values['csc_dynamicsecurity'] === true &amp;&amp; this.form.get('csc_dynamicsecurityexplanation')) {
          this.form.addControl('csc_dynamicsecurityexplanation', new FormControl('', Validators.required)); // Add new form control
        }
        else if (values['csc_dynamicsecurity'] === false &amp;&amp; this.form.get('csc_dynamicsecurityexplanation')) {
          this.form.removeControl('csc_dynamicsecurityexplanation');
        }
      });
    }
  </code></pre>