相关疑难解决方法(0)

我在尝试实现嵌套的角度 FormGroup 时遇到了问题。

我正在使用描述表单输入的特定方案（客户端和服务器之间的接口）。我想创建一个具有某些验证的 FormGroup，并找到使用方案对象初始化 FormGroup 的最简单有效的方法。

方案对象属性本身就是对象，因此我想为其中的每一个创建自己的 FormGroup。此外，包含主 FormGroup 的组件包含应该连接到内部 FromGroups（方案对象的键）的子组件。

例如：

MySchema: {
  velocity: 
  {
    speed: number,
    direction: number
  },
  position: 
  {
    x: number,
    y: number
  }
}

主窗体应该有 2 个内部组件 - 速度组件和位置组件。

每个子组件都应该连接到一个子表单组（速度组件到速度组等等）并显示相关的验证。

主窗体应连接到主 FormGroup。

这是一个小例子，在我们的项目中，架构要大得多，手动编写所有内部元素似乎是错误的。

我希望你能帮助我找到更好的方法。

谢谢。

更新

也许我的问题不够清楚..有没有办法将大对象转换为角度形式组/形式控件？

我的每个表单都包含我从服务器收到的对象，手动在 fb 中编写每个元素似乎是错误的。

再次感谢所有已经回答的人

我试图在我的 angular 项目中嵌套多个反应形式，并且形式在不同的组件中。

例如，我有一个组件，其中包含一个具有两个输入的表单，一个是名称输入，一个是描述输入和一个提交按钮。我称这个组件NameDescComponent

我计划在多个页面和表单中使用这个组件。这是组件的 html。

<form [formGroup]="nameDescForm" (ngSubmit)="customEmit()">
    <div fxLayout="row" fxLayoutGap="10px" fxFlex>
      <mat-form-field>
        <input matInput placeholder="Name" formControlName="name">
      </mat-form-field>
      <mat-form-field fxFlex>
        <input matInput placeholder="Description" formControlName="description">
      </mat-form-field>
    </div>
    <div fxLayout="column" fxLayoutGap="10px">
      <button type="submit" mat-raised-button color="primary">
        {{buttonText}}
      </button>
      <div>
      </div>
    </div>
  </form>

这是缩写的 ts 文件

public nameDescForm: FormGroup;



@Input() public buttonText: string;
  @Output() public save: EventEmitter<any> = new EventEmitter<any>();
  @Output() public nameDescFormEmit: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

  constructor(fb: FormBuilder) {
    this.nameDescForm = fb.group({
      'name': ['', Validators.required],
      'description': ['']
    });
  }

  public ngOnInit() …

我在角度实现反应形式。我无法将价值从孩子传递给父母。

父表格示例：

<div class="fields-wrap" [formGroup]="parent">
<div class="input-wrap">
  <child-component></child-component>
</div>
<input type"button">Submit</div>
</div>

儿童伴侣表格：

<div class="fields-wrap" [formGroup]="child">
<input type="text" formControlName="firstname" />
<input type="text" formControlName="lastname" />
<input type="text" formControlName="email" />
</div>

当我单击从父组件提交时如何获得这些子值。谁能帮我？