angular reactive forms dynamically add and remove controls and validate

Question

https://stackblitz.com/edit/angular-ivy-dynamicfrm1?file=angular.json

I am trying to dynamically add / remove a control based on dropdown value change but for some reason the validation are not getting fired and form submit button is not getting disabled

can someone please take a look.

<form [formGroup]="dynamicForm">
  <select formControlName="selectCtrl">
    <option>Select</option>
    <option value="add"> Add Mandatory TextBox</option>
    <option value="remove"> Remove Mandatory TextBox </option>
    <option> Some Input</option>
  </select>
  <div *ngIf="showDfield">
    <input formControlName="dynamicTextControl"
      type="text">
  </div>
  <div>
    <button type="sumit"
      class="btn btn-primary"
      [disabled]="!dynamicForm.valid">Submit</button>
  </div>
</form>

addDynamicForm() {
  console.log("addDynamicForm ");
  let dCtrl = new FormControl("dynamicTextControl");
  this.dynamicGroup.addControl("dynamicTextControl", dCtrl);
  dCtrl.setValidators(Validators.required);
  dCtrl.updateValueAndValidity();
}

removeDynamicForm() {
  this.dynamicGroup.removeControl("dynamicTextControl");
}

Answer 1

In your stackblitz, you've got a nested form group that you've defined in the code-behind, but not the template. Once you update the template to match how you've defined the form, the validity will update properly.

Here's how you've defined your form in the stackblitz:

this.dynamicForm = this.fb.group({
  selectCtrl: "Select",
  dynamicGroup: this.fb.group({}) //this is where you are adding the dynamic control
});

Your function appends the control to the sub-group

addDynamicForm() {
  console.log("addDynamicForm ");
  let dCtrl = new FormControl("dynamicTextControl");

  //right here is where you append to the sub-group
  this.dynamicGroup.addControl("dynamicTextControl", dCtrl); 

  dCtrl.setValidators(Validators.required);
  dCtrl.updateValueAndValidity();
}

Here's the corrected template, along with a forked stackblitz:

<form [formGroup]="dynamicForm">
    <select formControlName="selectCtrl" >
   <option>Select</option>
  <option value="add" > Add Mandatory TextBox</option>
  <option value="remove"> Remove Mandatory TextBox </option>
  <option> Some Input</option>
</select>
    
    <!-- here's your nested group! -->
    <div [formGroup]="dynamicGroup">
        <div *ngIf="showDfield">
            <input formControlName="dynamicTextControl" type="text"  >
        </div>
    </div>

    <div>
        <button type="sumit" class="btn btn-primary" [disabled]="!dynamicForm.valid" >Submit</button>
    </div>
</form>