Angular9 为什么组件中显示了一个表单组，但控制台报错说它的表单控件未定义？

Question

我有一个奇怪的行为 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 Error: Cannot find control with name: '_id'

core.js:6185 ERROR Error: Cannot find control with name: '_tag'

...

但是这些字段显示正确，如 stackblitz 所示。

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

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

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

null

如果我安慰(this.indexesForm.get(arrayIndexControl).value);，它会return一个未定义的错误。

这是一个 stackblitz 我有数据的例子。

Answer 1

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

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

是一样的

Angular9 为什么组件中显示了一个表单组，但控制台报错说它的表单控件未定义？

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?

arrays

form-control

angular

angular-reactive-forms