typescript 是否可以在Angular中嵌套两层深的窗体?

fhity93d  于 2023-01-27  发布在  TypeScript
关注(0)|答案(2)|浏览(106)

我需要在一个Angular项目中为一个功能嵌套一个两层深的表单组。
我有多个小型窗体组。这些窗体组都有一个公共的 parentform。对于新页面,我需要一个 * separate formgroup* 以及 parentform 的所有子窗体。我正在尝试创建一个新的parentform,它有两个子窗体:分隔窗体组 * 和第一个父窗体 *。
我尝试这样做是为了避免过多的重复代码。我尝试最终得到的结构看起来像这样:

child formgroups \
                  ==> original parentform \
                                           ==> new parentform
                       seperate formgroup /

目前我导入原始的 parentform 和 * separate formgroup* 以相同的方式。即:添加控件(“* 分隔 ”, 分隔窗体组 );添加控件(“原始父项”, 父项表单 *);
我遇到的问题是表单本身正在更新,但PUT请求主体中的对象没有更新。
有没有可能使用深度超过一级的表单组嵌套?

ivqmmu1c

ivqmmu1c1#

是的!!!Angular允许通过使用 ngModelGroup 指令在父窗体组中创建嵌套窗体组来创建嵌套窗体。
下面是代码示例:

<form [formGroup]="parentFormGroupName">
   <div formGroupName="firstLevelGroupName">
      <input formControlName="firstLevelControl" ..>
      <div formGroupName="secondLevelGroupName">
         <input formControlName="secondLevelControl" ..>
      </div>
   </div>
</form>

在此示例中,parentFormGroupName是顶级表单组,它包含firstLevelGroupName表单组,firstLevelGroupName表单组又包含secondLevelGroupName表单组。如果级别较多,则复杂性会增加,并且难以管理表单。
同样,你需要在你的组件类中定义每一层的表单组,并使用正确的绑定将其链接到模板。如果你想访问嵌套表单的控件和值,你应该使用正确的路径来访问它们。

4urapxun

4urapxun2#

是的,

form!: FormGroup;
  
  constructor(private formBuilder: FormBuilder) {
     // incialize form structure
     this.form = this.formBuilder.group({
      1: ['', Validators.required],
      2: this.formBuilder.group({
        2_1: ['', [Validators.required]],
        2_2:  ['', [Validators.required]],
      })
    });
  }

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input type="text" formControlName="1" />

    <div class="form-group" formGroupName="2">
      <input type="text" formControlName="2_1" />
      <input type="text" formControlName="2_2" />
    </div>
  </div>

  <button [disabled]="loading" class="btn btn-primary">Submit</button>
</form>

等等...

相关问题