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>

Nope. One has been used in the custom components class and other is used inside the host form. In case of simple components i.e. just one input box, the formcontrol is repeated like this. — Mickymots
– Mickymots, Commented Jun 27, 2017 at 6:25

Mickymots · Accepted Answer · 2017-06-28 10:56:26Z

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:

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() {}

}

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>

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('')
   }),
 })

}

<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>

Hello, I am reading your solution and trying to implement it. It's kinda working but I have this weird error : control.registerOnChange is not a function. It seems to be related to the fact that I am linking a formControlName to a FormGroup (In your example it's the same : address being a FormGroup and attached as a formControlName) Did you experience similar stuff ?

Andrea Biagini · Accepted Answer · 2019-10-15 13:57:22Z

0

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('')
   }),
 })

}

answered Oct 15, 2019 at 13:57

Andrea Biagini

11 bronze badge

Collectives™ on Stack Overflow

How to create Angular 2 Custom Component with multiple input fields

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related