Angular 9 为什么组件中显示了一个表单组，但控制台出现错误，提示未定义它的表单控件？答案

【问题标题】：Angular 9 Why a form group is displayed in the component but an error at the console saying that a form control of it is not defined?Angular 9 为什么组件中显示了一个表单组，但控制台出现错误，提示未定义它的表单控件？
【发布时间】：2020-07-11 21:34:48
【问题描述】：

我有一个奇怪的行为 FormGroup。

我正在做的是根据数组的关键属性的数量将FormControls 生成到所需的表单组中。

假设我有以下数组：

arrayData = [
    {_id: 123, _name: 'XYZ', gender: 'Male'},
    {_id: 124, _name: 'XYW', gender: 'Female'}
];

提取的arra属性如下：

this.odkDataIndexes = ['_id', 'name', 'gender'];

现在，对于每个索引，我需要在indexesForm 表单组中生成一个表单控件：

async createIndexesForm(extractedIndexesArray) {
  const controls = extractedIndexesArray.reduce((g, k) => {
    g[k] = '';
    return g;
  }, {});
  this.indexesForm = this.fb.group({controls});
  console.log(this.indexesForm);
}

一旦用户点击具有点击事件的按钮，该函数将被触发：(click)=generateMappingFields():

async generateMappingFields() {
    this.showFields = false;
    this.removeUnnecessaryFieldsMsg = '';
    if (this.odkDataIndexes.length > 0) {
      await this.createIndexesForm(this.odkDataIndexes).then(() => {
        this.showFields = true;
        this.tabIndex = 1;
      });
    }
}

对于console.log(this.indexesForm); 输出，for 似乎已创建：

它包含以下控件：

哪些是我从数据中提取的完全相同的索引。

现在我需要将这些控件显示如下：

<div class="flexColEven">
    <mat-spinner *ngIf="!indexesForm" value="50" class="setSpinnerOnTop" diameter="75" [color]="medair-color">
    </mat-spinner>
    <div *ngIf="showFields && indexesForm">
        <div [formGroup]="indexesForm" *ngIf="indexesForm" class="flexRow">
            <!-- {{indexesForm.valid | json}} -->
            <div *ngFor="let controlName of odkDataIndexes">
                <span></span>
                <div>
                    <h3>ONA field: {{controlName}}</h3>
                </div>
                <mat-form-field class="formFieldWidth" color="warn" appearance="fill">
                    <mat-label>{{controlName}}</mat-label>
                    <mat-select [formControlName]="controlName">
                        <mat-option *ngFor="let de of dataElementsDetails; let i = index;"
                            [value]="de.id">
                            {{de.displayName}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
    </div>
</div>

当indexesForm 创建时，我将显示每个控制器都有一个下拉列表的 div，它显示正确，但同时显示一个错误，每个控制器说：

core.js:6185 ERROR 错误：找不到名称为“_id”的控件

core.js:6185 ERROR 错误：找不到名称为“_tag”的控件

...

但是正如stackblitz 向您显示的那样，这些字段会正确显示。

当我需要获取每个下拉列表的值时：

mapping() {
  this.odkDataIndexes.forEach((arrayIndexControl) => {
    console.log(arrayIndexControl);
    console.log(this.indexesForm.get(arrayIndexControl));
  });
}

我可以清楚地看到arrayIndexControl 是indexesForm 组的表单控件的名称，但第二个控制台显示以下响应：

空

如果我安慰(this.indexesForm.get(arrayIndexControl).value);，它将返回未定义的错误。

这是一个stackblitz，其中包含我拥有的数据示例。

【问题讨论】：

标签： arrays angular angular-reactive-forms form-control

【解决方案1】：

在这一行this.indexesForm = this.fb.group({controls}); 上，您正在创建一个表单组，其中包含一个名为controls 的表单控件。替换为：this.indexesForm = this.fb.group(controls);

一般来说，做const obj = {controls};和const obj = { controls: controls };是一样的

【讨论】：