角反应形式动态添加和删除控件并验证

问题描述

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

我正在尝试根据下拉值的变化动态添加/删除控件 但由于某些原因，验证未触发并且表单提交按钮未禁用

有人可以看看吗？

<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");
}

解决方法

在堆叠闪电战中，您有一个在代码背后定义的嵌套表单组，但没有模板。更新模板以匹配定义表单的方式后，有效性将正确更新。

这是您在Stackblitz中定义表单的方式：

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

您的函数将控件附加到子组

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();
}

以下是更正后的模板以及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>