0

I am using reactive from in Angular 7. I am creating child component for user profile edit. I have multiple role wise user pages. In all these pages user profile fields are common. So I have created user profile component in which I have an input parameter FormGroup:

constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      test: ['', Validators.required]
    });
}

<user-profile [formGroup]="myForm" [submitted]="submitted"></user-profile>

Now I want to extend input FromGroup to add user profile fields. For ex, I'd like to extend/add incoming/input FormGroup like below from my child component:

.group({
  username: ["", Validators.required],
  email:["", Validators.required],
});

Can anyone suggest me how can i do that?

I have more then 20 fields in my child component. So i don't want to add FormControl one by one. Is there any way to extend JSON like below in existing form-group 

{
      username: ["", Validators.required],
      email:["", Validators.required],
}
Ankur Akvaliya
  • 2,989
  • 4
  • 28
  • 53
  • 2
    Your Form is a FormGroup, so you can add a FormGroup (or a control) to your form: this.myForm.AddControl("data",myNewGroup);, see https://angular.io/api/forms/FormGroup#addcontrol – Eliseo Dec 21 '18 at 12:33
  • If you want to add some fields to an existing group use "addControl" of the group instance, also see the docs https://angular.io/api/forms/FormGroup#addControl – J. Knabenschuh Dec 21 '18 at 12:34
  • I have more then 20 fields in child component. I directly want to add something like this `{ username: ["", Validators.required], email:["", Validators.required]}` instead of adding controls one by one. Is there any way to do that? – Ankur Akvaliya Dec 21 '18 at 12:51

0 Answers0