How to create Angular 2 Custom Component with multiple input fields

Question

I have created a simple custom component in Angular 2 by implementing the CustomValueAccessor interface and it works fine. This component has just 1 input field in it. e.g. Postcode component

 <postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>

Now, I want to expand on this example and create an address component that has multiple input fields, line1, line 2, line3, postcode and country.

I have expanded the postcode example to include multiple fields and I can see the input component coming up on screen. However, the address component values are not being reflected in the host form.

Appreciate any pointer in this direction.

Example :

import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup, ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CommonAddressComponent,
      multi: true
    }
  ]
})

export class CommonAddressComponent implements OnInit , ControlValueAccessor {
  addressForm :  FormGroup

  ngOnInit() {
    this.addressForm = this.formBuilder.group({
      line_1: '',
      line_2: '',

    });
  }

  /*private addressForm = new FormControl()*/

  private subscription: Subscription;
  public disabled: any = false;

  constructor(private formBuilder: FormBuilder) { }

  //model to view
  writeValue(value: any) {
    console.log("value = " + value)
    this.addressForm.setValue(value); 
  }

  registerOnChange(fn: (value: any) => void) {
    console.log("registerOnChange = " + fn)

    this.addressForm.valueChanges.subscribe(fn);
  }

  registerOnTouched() {}


}

Template file :

<div class="form-group" [formGroup]="addressForm">
  <input class="form-control" type="text" formControlName="line_1" />
  <input  class="form-control" type="text" formControlName="line_2" />
</div>

Host Form component file:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms';


@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {

  contactsForm: FormGroup;

  constructor(private fb: FormBuilder) {
     this.createForm();
   }

   createForm() {
    this.contactsForm = this.fb.group({
      name: 'test', // <--- the FormControl called "name"
      postcode: 'tester111', // <--- the FormControl called "name"
      line_3: '111', // <--- the FormControl called "name"*/
      addressForm: new FormGroup({
              line_1: new FormControl('I am line 1', Validators.minLength(2)),
              line_2: new FormControl('I am line 2')

            }),
    });
  }

  ngOnInit() {
  }

}

Host Form Component Template file:

<form [formGroup]="contactsForm">

  <p>Form value: {{ contactsForm.value | json }}</p>
  <p>Form status: {{ contactsForm.status | json }}</p>


   <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>

    <div>
      <postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>
    </div>

    <div class="form-group">
    <address-line  cssClass="form-control" name="line3" label="line 3" elementName="line3" 
      elementID="line3" formControlName="line_3"> </address-line>
    </div>

     <!--<div [formGroup]="contactsForm.addressForm"> -->
    <div >
      <address formGroupName="addressForm"> </address>
    </div>

  </form>

Answer 1

Note that Host or Parent Component class must declare the "address" field as a FormControl, not a FormGroup:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

 pageForm: FormGroup = new FormGroup({
  address: new FormControl({
     line1: new FormControl('',Validators.required),
     line2: new FormControl('',Validators.required),
     line3: new FormControl('',Validators.required),
     line4: new FormControl('')
   }),
 })

}

Answer 2

After multiple attempts, I was able to get a custom control with multiple input fields in Angular working. Code for the same goes as follows:

1. Custom component with multiple input fields

   import { Component, OnInit, Input, ViewChild } from '@angular/core';
   import { FormControl,NgForm, FormGroup, ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators, NgModel } from '@angular/forms';
   import { Subscription } from 'rxjs/Subscription';
   
   @Component({
     selector: 'address',
     templateUrl: './address.component.html',
     styleUrls: ['./address.component.scss'],
     providers: [
       {
         provide: NG_VALUE_ACCESSOR,
         useExisting: AddressComponent,
         multi: true
       }
     ]
   })
   
   export class AddressComponent implements OnInit , ControlValueAccessor {
   
      addressForm :  FormGroup
   
      @Input() label: string;
   
     constructor(private formBuilder: FormBuilder) { }
   
     ngOnInit() {
       this.addressForm = this.formBuilder.group({
         line1: '',
         line2: '',
          line3: '',
           line4: '',
       });
     }
   
   
     writeValue(value: any) {
       if (value) {
         this.addressForm.setValue(value);
       }
     }
   
     registerOnChange(fn: (value: any) => void) {
       console.log("registerOnChange = " + fn)
       this.addressForm.valueChanges.subscribe(fn);
     }
    registerOnTouched() {}
   

   }

2. Template of Custom Component

Template Code

<div class="form-group" [formGroup]="addressForm">
  <input type="text" name="line1" class="form-control" type="text" formControlName="line1" />
  <input type="text" name="line2" class="form-control" type="text" formControlName="line2" />
  <input type="text" name="line3" class="form-control" type="text" formControlName="line3" />
  <input type="text" name="line4" class="form-control" type="text" formControlName="line4" />
</div>

3. Host or Parent Component class

   import { Component } from '@angular/core'; import { NgForm, Validators, FormControl, FormGroup } from '@angular/forms';

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
   
    pageForm: FormGroup = new FormGroup({
     address: new FormGroup({
        line1: new FormControl('',Validators.required),
        line2: new FormControl('',Validators.required),
        line3: new FormControl('',Validators.required),
        line4: new FormControl('')
      }),
    })
   
   }
   

4.

<div class="container">
  <form [formGroup]="pageForm">
    <p>Form value: {{ pageForm.value | json }}</p>
    <p>Form status: {{ pageForm.status | json }}</p>

    <address  label="Line 1" formControlName="address" > </address>

  </form>
</div>