gpt4 book ai didi

angular - 如何创建嵌套的表单组,基于模型的 react 表单

转载 作者:行者123 更新时间:2023-12-02 00:23:33 24 4
gpt4 key购买 nike

我有一个 react 形式的 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

这是一个 stackblitz 链接: https://stackblitz.com/edit/rxweb-nested-formgroup-using-model

最佳答案

根据 an example@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);
}

Forked Stackblitz

关于angular - 如何创建嵌套的表单组,基于模型的 react 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54603929/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com