使用 Angular 反应形式创建嵌套表单组-Java 学习之路

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

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

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

例如：

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

主要形式应该有 2 个内部组件 - 速度组件和位置组件。

每个子组件应连接到子 formGroup(到 velocityGrouop 和 such..)并显示相关的验证。

主窗体应连接到主 FormGroup。

这是一个小例子，在我们的项目中，模式更大，手动编写所有内部元素似乎是错误的。

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

谢谢。

****更新

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

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

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

1 回答

角度反应形式支持多个表单组。

零件：

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>

回复于 2024-04-26T12:21:44+08:00

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

1 回答

相关问题