You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Kevin C. Coram b8b2f8a3e7
Document 'own form controls' application
1 year ago
src Rename model attributes to remove underscore 1 year ago Document 'own form controls' application 1 year ago
browserslist nx g @nrwl/angular:app parent-form 1 year ago
jest.config.js nx g @nrwl/angular:app parent-form 1 year ago nx g @nrwl/angular:app parent-form 1 year ago
tsconfig.json nx g @nrwl/angular:app parent-form 1 year ago
tsconfig.spec.json nx g @nrwl/angular:app parent-form 1 year ago
tslint.json nx g @nrwl/angular:app parent-form 1 year ago

Components Creating Own Form Controls

When a component becomes sufficiently complex, or the developer wishes to be able to reuse parts of it elsewhere, the component can be refactored into sub-components. One approach to binding such sub-components to their containing parent component is to pass the parent component’s FormGroup in as an @Input parameter. Additionally, the data that each child sub-component needs is passed into an @Input. The children create their own FormControls as needed, and add them to the parent FormGroup provided to them. This approach greatly simplifies the code and template of the parent component:

export class AppComponent implements OnInit, OnDestroy {
  contact: Contact;
  form: FormGroup;

  private subscription: Subscription

  constructor(private fb: FormBuilder, private service: ContactService) {
    this.form ={});

  public ngOnInit() {
    this.subscription = this.service.loadContact().subscribe((data: Contact) => { = data;
<form [formGroup]="form">

The nested-forms-name component is responsible for creating the form controls binding to the Contact’s name, and the nested-forms-address-list component is responsible for iterating over the Contact’s addresses and binding to them using the nested-forms-address (singular) component. For example, the nested-forms-name would be implented as so:

  selector: 'nested-forms-name',
  templateUrl: './name.component.html',
  styleUrls: ['./name.component.css']
export class NameComponent implements OnInit {

  @Input() name: Name;
  @Input() parent: FormGroup;

  group: FormGroup;

  constructor(private fb: FormBuilder) {

  ngOnInit() { ={
      firstName: new FormControl( ? : ''),
      lastName: new FormControl( ? : ''),
      middleName: new FormControl( ? : ''),
      prefix: new FormControl( ? : ''),
      suffix: new FormControl( ? : ''),

    if (this.parent) {

Calling this.parent.addControl(....) is what ensures that the controls created in the child component are made part of the over-all form.


  • The parent component is easy to understand and maintain
  • Each child component encapsulates its form controls and template
  • The child components can easily be re-used in other “parent” components


  • The creation of the form controls is tightly coupled with the templates
  • Since each child component encapsulates its form controls, the overall shape of the form data is not always clear