类型错误：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>

Answer 1

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

<mycomponent formControlName="bogusfieldSpelledWrong" ...>

为什么 Angular 显示它，因为这个错误可能与组件初始化/更改表单的方式有关。

Answer 2

这是由于视图中的表单变形造成的。

这是由乱序formArrayName、循环和formGroupName

形式（控制器）

form = <FormGroup>this.fb.group({
    hops: this.fb.array([
        this.fb.group({...}),
        ...
    ])
});

观点（错误）

<li class="asset" *ngFor="let control of hops.controls; let i = index;">
    <div formArrayName="hops">
        <div [formGroupName]="i">

视图（更正）

<div formArrayName="hops">
    <li class="asset" *ngFor="let control of hops.controls; let i = index;">
        <div [formGroupName]="i">

Answer 3

它必须与 formControlName 有关。检查 ts 文件和 html 文件中的表单控件名称。对于嵌套组，您可以使用 formGroupName，然后使用 formControlName。

this.yourForm = this.fb.group({
    name: [''],
    contact: this.fb.group({
      address: ['']
    }) 
})

<form [formGroup]="yourForm">
  <input type="text" formControlName="name" />
  <div formGroupName="contact">
    <input type="text" formControlName="address" />
  </div>
</form>