How to create nested formgroup, model based reactive form

Question

I have a User form of reactive forms and I have used RxFormBuilder from @rxweb package , I have a user model class which contains UserInfo object, how can I use it as a nested formgroup?

model.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;

}

component.ts:

export class UserInfoComponent implements OnInit {

    userInfoFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.formGroup(User);
    }
}

I want to use UserInfo object in the user model as a nested formgroup. How can I create nested formgroup?

Here is a stackblitz link : https://stackblitz.com/edit/rxweb-nested-formgroup-using-model

yurzui · Accepted Answer · 2019-02-10 01:06:49Z

6

According to an example from @rxweb/reactive-form-validators you should decorate you userInfo property with @propObject decorator:

import { propObject} from "@rxweb/reactive-form-validators";

export class User {
  ...

  @propObject(UserInfo)
  userInfo: UserInfo;
}

And also initialize FormGroup like:

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

Forked Stackblitz

edited Feb 10, 2019 at 1:06

answered Feb 9, 2019 at 17:09

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create nested formgroup, model based reactive form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related