如何创建嵌套的表单组，基于模型的反应式表单

Question

我有一个反应式形式的User形式，并且我使用了@rxweb包中的RxFormBuilder，我有一个包含UserInfo对象的用户模型类，我怎样才能将其用作嵌套formgroup？

模型.ts：

import {prop,propArray } 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;
 @prop()
 userInfo : UserInfo;
}

组件.ts：

export class UserInfoComponent implements OnInit {
    userInfoFormGroup: FormGroup
    constructor(
        private formBuilder: RxFormBuilder
    ) { }
    ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.formGroup(User);
    }
}

我想将用户模型中UserInfo对象用作嵌套formgroup。如何创建嵌套formgroup？

这是一个堆栈闪电链接：https://stackblitz.com/edit/rxweb-nested-formgroup-using-model

Answer 1

根据@rxweb/reactive-form-validators的一个例子，你应该用@propObject装饰器装饰你的userInfo财产：

import { propObject} from "@rxweb/reactive-form-validators";
export class User {
  ...
  @propObject(UserInfo)
  userInfo: UserInfo;
}

并初始化FormGroup，例如：

ngOnInit() {
    let user = new User();
    user.userInfo = new UserInfo();
    this.userInfoFormGroup = this.formBuilder.formGroup(user);
}

分叉堆叠闪电战