CODEWITHSUNDEEP
angular
Nie Selam
Nie Selam

Reputation: 1451

Working with form elements in child component raises formControlName error

Happy Holidays guys,

Please bear with me as English is my third language.

I am moving a JQuery driven app to angular and got stuck. There are different report related modules that depend on dates and I want to create one component and import to parent components. I was under the impression that calling the child component simply injects whatever is in child component template but I guess now (picture php's include function).

The plunkr shows the basic arrangement of what I have tried. But basically, I want to use the date components in other parent components. For e.g. in my parent component I have this:

        this.rForm = fb.group({
     'processedon': fb.group ({
        'datefilteroption' : [null, [Validators.required]],
        'dateportion' : [null, []],
        'date1': [null, []],
        'date2': [null, []]
      })
     });

where, the children under processedon are elements defined in my child form. The child component hmtl template contains formControlName that matches them (date1,date2 etc). I can have more date requirements in the same output so the above can be expanded as below. The idea is the child component remains untouched and the group would be used to manipulate its components from just about anywhere.

   this.rForm = fb.group({
     'processedon': fb.group ({
        'datefilteroption' : [null, [Validators.required]],
        'dateportion' : [null, []],
        'date1': [null, []],
        'date2': [null, []]
      }),
     'paidbackon': fb.group ({
        'datefilteroption' : [null, [Validators.required]],
        'dateportion' : [null, []],
        'date1': [null, []],
        'date2': [null, []]
      })
     });

The error I am getting now is "formControlName must be used with a parent formGroup directive when using child component". I have attempted to create a formGroup in the child component but then that forced me to create a form within a form and was errorful.

I hope my question is clear.

Upvotes: 0

Views: 536

Answers (1)

yurzui
yurzui

Reputation: 214305

The most simple way to solve your issue is to provide ControlContainer within viewProviders array of your child component:

import { ControlContainer, FormGroupName  } from '@angular/forms';

@Component({
  selector: 'app-date-query',
  templateUrl: './date-query.component.html',
  ...
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupName  }
  ]
})
export class DateQueryComponent implements OnInit {

Stackblitz Example

See also

Upvotes: 1

Related Questions