Question

在尝试实现嵌套的有角FormGroup时遇到了一个问题。

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

方案对象属性是对象本身，因此对于其中每个对象我都想创建自己的FormGroup。另外，保存主要FormGroup的组件包含子组件，这些子组件应连接到内部FromGroups（scheme对象的键）。

例如：

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

主要形式应具有2个内部成分-速度成分和位置成分。

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

主窗体应连接到主FormGroup。

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

我希望您能够帮助我找到一种更好的方法。

谢谢。

更新

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

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

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

Answer 1

Angular反应性表单支持多个表单组。

组件：

this.MySchemaFrom = this.fb.group({
        velocity: this.fb.group({
            speed: ['', Validators.required],
            direction: ['', Validators.required]
        }),
        position: this.fb.group({
            x: ['', Validators.required],
            y: ['', Validators.required]
        })
    });

模板：

<form [formGroup]="MySchemaFrom">
        <div formGroupName="velocity">
                <legend> velocity </legend>
            <div class="form-group">
                <label for="name">Speed</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="name" 
                    formControlName="speed">
            </div>
            <div class="form-group">
                <label for="email">Direction</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="email" 
                    formControlName="direction">
            </div>
        </div>
        <div formGroupName="position">
                <legend> position </legend>
            <div class="form-group">
                <label for="name">X</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="name" 
                    formControlName="x">
            </div>
            <div class="form-group">
                <label for="email">Y</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="email" 
                    formControlName="y">
            </div>
        </div>

        <button (click)="submit()">Submit</button>
    </form>

使用Angular反应形式创建嵌套形式组

1 个答案: