如何基于RxFormBuilder创建嵌套FormGroup的模型驱动响应式表单

Got it, let's get your nested FormGroup working with RxFormBuilder. Here's the step-by-step fix:

1. Update the User Model to Define Nested FormGroup #

First, modify your User class to explicitly mark the userInfo property as a nested FormGroup using the formGroup option in the @prop decorator. This tells RxFormBuilder to map the UserInfo class to a nested FormGroup:

// model.ts
import { prop } from "@rxweb/reactive-form-validators"

export class UserInfo{
  @prop() cityId: number
  @prop() countryId: number;
}

export class User{
  @prop() userId: string;
  @prop() password: string;
  @prop() securityQuestion: string;
  // Add formGroup option to link to UserInfo model
  @prop({ formGroup: UserInfo })
  userInfo : UserInfo;
}

2. Fix the Component Form Initialization #

Right now you're passing the User class constructor to formGroup(), but RxFormBuilder requires an instance of your model. Create an instance of User (and initialize the nested UserInfo to avoid null errors) before building the form:

// component.ts
import { OnInit, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { User } from './model';

export class UserInfoComponent implements OnInit {
  userInfoFormGroup: FormGroup;

  constructor( private formBuilder: RxFormBuilder ) { }

  ngOnInit() {
    // Create a User instance and initialize nested UserInfo
    const userModel = new User();
    userModel.userInfo = new UserInfo();

    // Build the form using the model instance
    this.userInfoFormGroup = this.formBuilder.formGroup(userModel);
  }
}

3. Use the Nested FormGroup in the Template #

In your HTML template, use the formGroupName directive to group the controls belonging to the nested userInfo FormGroup:

<!-- component.html -->
<form [formGroup]="userInfoFormGroup">
  <!-- Main User Controls -->
  <div>
    <label>User ID:</label>
    <input formControlName="userId" type="text">
  </div>
  <div>
    <label>Password:</label>
    <input formControlName="password" type="password">
  </div>

  <!-- Nested UserInfo Controls -->
  <div formGroupName="userInfo">
    <h3>User Details</h3>
    <div>
      <label>City ID:</label>
      <input formControlName="cityId" type="number">
    </div>
    <div>
      <label>Country ID:</label>
      <input formControlName="countryId" type="number">
    </div>
  </div>
</form>

This will generate a fully functional reactive form with a nested userInfo FormGroup, linked to your model classes as expected.

内容的提问来源于stack exchange，提问作者Avni Patel