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

【问题标题】：angular reactive forms dynamically add and remove controls and validate角度反应形式动态添加和删除控件并验证
【发布时间】：2020-09-07 00:55:24
【问题描述】：

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

【问题讨论】：

标签： angular angular-reactive-forms angular-forms angular-validation

【解决方案1】：

在您的 stackblitz 中，您有一个在代码隐藏中定义的嵌套表单组，但不是模板。一旦您更新模板以匹配您定义表单的方式，有效性将正确更新。

这是您在 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>

【讨论】：