Angular 反应式 Forms：如何在不知道 HTML 中的键的情况下访问组中的表单控件名称

Question

我正在使用反应式 angular forms 来构建我的表单，下面是 function 在主表单组中添加一个嵌套表单组。 嵌套表单组具有基于正在发送的参数的控件。

表单组正在正确构建。

我的问题：

如果它是在表单组中定义的一组预定义键，我们可以使用 formControlName = 'key' 从 HTML 表单访问它，但在我的情况下，由于我不知道表单控件引用键提前，我我不确定如何参考 HTML 中的表单控件。

.ts 文件

表格 Model Function：

    buildForm(type:string, params: {name: string,required: boolean}[]) {
          let pathParamFormGroup: FormGroup;
          let formControls = {};

          params.forEach((param: {name: string,required: boolean}) => {
              const {name, required} = param;
              formControls[name] = new FormControl('', required ? Validators.required: null);
          });

          pathParamFormGroup = new FormGroup(formControls);
          this.form.addControl(type, pathParamFromGroup);
    }

html

<form (ngSubmit)="sendRequest()" [formGroup]="requestForm"> 
  <ng-container formGroupName="query">
    <input formControlName="????" type="text"> --> Not sure how to get the form control names within a form group in html. 
  </ng-container>
</form> 

Answer 1

您可以使用*ngFor直接遍历您的formGroup的controls属性以访问表单控件。

看看我在 stackblitz 上所做的这个例子：

*ngFor 与 formGroup