angular 反应式表单动态添加和删除控件并验证

Question

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

Answer 1

在您的 stackblitz 中，您有一个在 code-behind 中定义的嵌套表单组，但不是模板。更新模板以匹配您定义表单的方式后，有效性将正确更新。

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

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

您的函数将控件附加到 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();
}

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

angular 反应式表单动态添加和删除控件并验证

angular reactive forms dynamically add and remove controls and validate

angular-validation

angular

angular-reactive-forms

angular-forms