Nested form group in Angular6

Question

I am trying to created nested form group in Angular6.

serviceItemForm: FormGroup;
apiForm : FormGroup;

this.serviceItemForm = this.fb.group({
  'name': new FormControl('', Validators.required),
  'description': new FormControl('', Validators.required),
  'categoryIds': new FormControl([], Validators.required),
  'tags': [],
  'status': '',
  'orderFormType': new FormControl([], Validators.required),
  'orderFormKey': new FormControl([], Validators.required),
  'workflow': [],
  'orderFormAction': new FormControl('', Validators.required),
  'customUI': new FormControl(''),
  'api': this.fb.group({
    'apiurl': new FormControl(''),
    'apimethod': new FormControl(''),
    'headers': this.fb.array([]),
    'payload': '',
  }),
  'userGroup': []
});

this.apiForm = this.serviceItemForm.get('api');

Here this.apiForm is giving error like Type 'AbstractControl' is not assignable to type 'FormGroup'. Property 'controls' is missing in type 'AbstractControl'. In VSCode.

Please help how can I use nested form-group in angular-6

Answer 1

You can try below code:

serviceItemForm: FormGroup;
apiForm : FormGroup;

this.apiForm = this.fb.group({
    'apiurl': new FormControl(''),
    'apimethod': new FormControl(''),
    'headers': this.fb.array([]),
    'payload': '',
  });

this.serviceItemForm = this.fb.group({
  'name': new FormControl('', Validators.required),
  'description': new FormControl('', Validators.required),
  'categoryIds': new FormControl([], Validators.required),
  'tags': [],
  'status': '',
  'orderFormType': new FormControl([], Validators.required),
  'orderFormKey': new FormControl([], Validators.required),
  'workflow': [],
  'orderFormAction': new FormControl('', Validators.required),
  'customUI': new FormControl(''),
  'api': this.apiForm,
  'userGroup': []
});

Answer 2

If you check typeof of any nested (or parent) FormGroup it will return always object. so what you can do is just typecast your variable of type object like this -

apiForm : Object;
...
this.apiForm = this.serviceItemForm.get('api');

Else, You can typecast at the time of assigning value to a variable like this -

apiForm : FormGroup;
this.apiForm = (<FormGroup>this.serviceItemForm.get['api']);