angular 当递归地使用Reactive Form时,嵌套组的路径会出错,

rggaifut  于 6个月前  发布在  Angular
关注(0)|答案(1)|浏览(42)

哪个@angular/*包是bug的来源?

forms

这是个回归吗?

描述

formControlName的父级是FormControlDirective,而不是formGroupName作为父级。这样一来,3个输入缺少名为"form"的表单组。

<button type="button" (click)="onClick()">Load</button>
<form [formGroup]="form">
  <ng-container *ngTemplateOutlet="fields; context : {$implicit : schema}"></ng-container>

  <ng-template #fields let-node>
    <ng-container *ngFor="let control of node.properties | keyvalue">
      <ng-container [ngSwitch]="widget(control.value)">
        <ng-container *ngSwitchCase="'form'">
          <div [formGroupName]="key(control)" >
            <ng-container *ngTemplateOutlet="fields; context : {$implicit : control.value}"></ng-container>
          </div>
        </ng-container>
        <ng-container *ngSwitchDefault>
          <input type="text" [formControlName]="key(control)" [placeholder]="key(control)">
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-template>
</form>
{
  "$schema" : {
    "properties" : {
      "form" : {
        "widget" : "form",
        "type" : "object",
        "properties" : {
          "firstName" : {
            "type" : "string",
            "title" : "First Name",
            "widget" : "text"
          },
          "lastName" : {
            "type" : "string",
            "title" : "Last Name",
            "widget" : "text"
          },
          "birthDate" : {
            "type" : "string",
            "title" : "Birthdate",
            "widget" : "date"
          }
        }
      }
    }
  },
  "form" : {
    "firstName" : "Patrick",
    "lastName" : "Bittner",
    "birthDate" : "1980-04-01"
  }
}
import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";
import {Node} from "./as-meta-form.classes";

@Component({
  selector: 'as-meta-form',
  templateUrl: 'as-meta-form.component.html',
  styleUrls: ['as-meta-form.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AsMetaFormComponent implements OnInit {

  @Input() model!: any
  @Input() schema!: Node
  form!: FormGroup

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
    this.form = this.formBuilder.group(this.schema2Form(this.schema.properties));
  }

  onClick() {
    this.form.setValue({form: this.model.form})
  }

  key(value: any): string {
    return value.key
  }

  widget(value: any): string {
    return value.widget
  }

  schema2Form(properties: any): FormGroup {
    let switchNode = (node: any) => {
      switch (node.widget) {
        case "form" : {
          return this.formBuilder.group(this.schema2Form(node.properties))
        }
        default : {
          return [""]
        }
      }
    }

    return Object.entries(properties).reduce((prev, [key, value]) => {
      prev[key] = switchNode(value);
      return prev;
    }, {} as any)
  }

}

请提供一个最小复现bug的链接

请提供您看到的异常或错误

ERROR Error: Cannot find control with name: 'birthDate'
ERROR Error: Cannot find control with name: 'lastName'
ERROR Error: Cannot find control with name: 'firstName'

请提供您发现此bug的环境(运行ng version)

Angular CLI: 15.1.1
Node: 19.4.0 (Unsupported)
Package Manager: npm 9.2.0
OS: win32 x64

Angular: 15.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.1
@angular-devkit/build-angular   15.1.1
@angular-devkit/core            15.1.1
@angular-devkit/schematics      15.1.1
@angular/cli                    15.1.1
@schematics/angular             15.1.1
ng-packagr                      15.1.1
rxjs                            7.8.0
typescript                      4.9.4

还有其他信息吗?

  • 无响应*
vbkedwbf

vbkedwbf1#

我已经找到了一个作为解决方法的临时方案。

相关问题