How to push object to forms in angular?

Question

How to push the roles form data value to createUserForm data value so that they will become 1 object ?

#The final result should look like this

{
    "emailAddress": "[email protected]",
    "firstName": "sdsfd",
    "lastName": "fsdfsdf",
    "phoneNumber": "21324",
    "companyName": "sdfsdf",
    "title": "CEO",
    "roleId": 7,
    "associatedAccount": "WALLS",
    "accountId": 4,
    "roles": [
        {
            "id": 12,
            "name": "Architect",
            "isShow": true,
            "transactionRoleId": 12
        },
        {
            "id": 11,
            "name": "Construction Project Director",
            "isShow": true,
            "transactionRoleId": 11
        },
        {
            "id": 9,
            "name": "COVP",
            "isShow": true,
            "transactionRoleId": 9
        }
    ]
}

This is the data from roles when I submit

 {
        "id": 12,
        "name": "Architect",
        "isShow": true,
        "transactionRoleId": 12
    }

This is the data from createUserForm when I submit

{
    "emailAddress": "adasd",
    "firstName": "asdasdasd",
    "lastName": "asdasd",
    "phoneNumber": "2132",
    "companyName": "adasdas",
    "title": "dasdasdas",
    "roleId": 7,
    "associatedAccount": "test",
    "accountId": 4
}

--->>> another form

roles = new FormControl();

--->>>> User Form

 createUserForm = new FormGroup({
    emailAddress: new FormControl(),
    firstName: new FormControl(),
    lastName: new FormControl(),
    phoneNumber:  new FormControl(),
    companyName: new FormControl(),
    title: new FormControl(),
    roleId: new FormControl(),
    associatedAccount: new FormControl(),
    accountId: new FormControl(),
  });

--->>> what i tried

 saveUser() {
        this.createUserForm.get('roleId').setValue(7);
        console.log("this.createUserForm.value" , this.createUserForm.value)
        console.log("data" ,this.roles.value)
        console.log("finaldata : " ,
 this.createUserForm.value.push(this.roles.value))

Ideally you should create a new field roles as a formArray inside the createUserForm this will do what you need out of the box, but somehow you have both separate and this.roles.value has the value which you need and only want to merge it with this.createUserForm.value then you can simply use this approach const formValues = { ...this.createUserForm.value, roles: this.roles.value } — Kamran Khatti
– Kamran Khatti, Commented Aug 8, 2021 at 19:09
and Kamran , how to I store each formValues to an array of objects? cause in my program I wanted to store every formValues to an array of objects or push it — user16619763
– user16619763, Commented Aug 8, 2021 at 19:13
For that you have to go with the approach I suggested above, lemme create a stackblitz example of form which will address your case give me a moment. — Kamran Khatti
– Kamran Khatti, Commented Aug 8, 2021 at 19:16
Okay , like I wanna create a allFormValues array of object then push every const formValues to it — user16619763
– user16619763, Commented Aug 8, 2021 at 19:21
you can either use the angular formbuilder by injecting it into your constructor and then using this._formbuilder.build({}). It sets up the formControls by itself and you can feed infos and validators directly like this._formBuilder.build({emailAddress: ['myEmail@address, [Validators.Email]], ... }). Or you can patch your form value by accessing single elements via this.createUserForm.get('emailAddress').patchValue(); — scy
– scy, Commented Aug 8, 2021 at 19:21

Kamran Khatti · Accepted Answer · 2021-08-08 19:40:30Z

4

You can achieve this by using angular reactive form try this out.

 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

 form: FormGroup;

 constructor(private _fb: FormBuilder) {}

 this.form = this._fb.group({
  firstName: [],
  emailAddress: [],
  ...
  roles: this._fb.array([]) // create a role form field as an array
});

You can call a method to add role object to form array

addRole(): void {
  const roles = this.form.get('roles') as FormArray;

  roles.push(
     this._fb.group({ id: [], name: [], isShow: [], transactionRoleId: [] 
    })
  );

  console.log(this.form.value);
}

Or can remove the added role by its index

removeRole(index: number): void {
  const roles = this.form.get('roles') as FormArray;

  roles.removeAt(index);
}

edited Aug 8, 2021 at 19:40

answered Aug 8, 2021 at 19:33

Kamran Khatti

4,2171 gold badge23 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How to push object to forms in angular?

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