TypeError：在 Ng 构建后无法读取 null 的属性“_rawValidators”

Question

我是有角度的新手。我正在动态地将一些字段呈现为我的反应形式。当我使用 ng serve 模拟请求时，一切都很好（即渲染正确发生，console.log 中没有错误）。一旦我使用 ng build 构建项目并使用适当的后端，我就会得到动态呈现的每个字段的错误：

 main.js:1 ERROR TypeError: Cannot read property '_rawValidators' of null

我找不到关于此错误的任何背景信息。我很想听听你的想法。

更多背景

// these fields change with selection
this.datafields = [{
              dfId: 48,
              dfName: "Phone",
              dfType: "text",
              dfOptions: null,
              dfValue: ""
              },
              {
              dfId: 49,
              dfName: "Eval",
              dfType: "select",
              dfOptions: ["","Remote","Live"],
              df_value: "",
              }]

ngOnInit 中的打字稿呈现（已尝试 ngAfterViewInit 没有改进）

 dfGroup = new FormGroup({})
...
...

 this.eyeForm = this.formBuilder.group({
      focus: ['', Validators.required],
 datafields: this.formBuilder.array([])
})

...
...

  if (this.datafields != null || this.datafields != undefined) {
  this.datafields.forEach((x:any) => {
          this.dfGroup.setControl(x.dfName, new FormControl(x.dfValue));
        });
  this.getDataFields.push(this.dfGroup);
  }

HTML 如下所示：

  <div [formGroup]="dfGroup">
   <div class="row pt-2" *ngFor="let field of datafields; let i=index">
      <div class="col-4 d-flex align-items-center 13required">
         {{field.dfName}}&nbsp;
      </div>
      <div class="col-6">
         <mat-form-field *ngIf="field.dfType == 'text'" appearance="outline">
            <input
            matInput
            [type]="field.dfType"
            [formControlName]="field.dfName"
            required
            />
         </mat-form-field>
         <mat-form-field
            *ngIf="field.dfType == 'select'"
            appearance="outline"
            >
            <mat-select [formControlName]="field.dfName" placeholder="">
               <mat-option
               [value]="option"
               *ngFor="let option of field.dfOptions"
               >
               {{ option }}
               </mat-option>
            </mat-select>
         </mat-form-field>
      </div>
   </div>
</div>

原文由 Grayrigel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当我模拟我的模板并打错了我的 formControlName 属性时，我遇到了这种情况。

 <mycomponent formControlName="bogusfieldSpelledWrong" ...>

为什么 Angular 将其显示为此错误可能与组件初始化/更改表单的方式有关。

原文由 tylerherzog 发布，翻译遵循 CC BY-SA 4.0 许可协议