0

I've got an angular2 component containing a reacitve form containing two addresses: a billing address and a shipment address. I would like to reuse the address part of the form, so I want to create a component containing the address fields (street, zip code, country, ...) which can be reused in other forms.

My problem is, I found no examples how to put parts of a FormGroup into other components. Are there any examples for this?

this.myForm = this._formBuilder.group({
    'salutation': [''],
    'title': [''],
    'firstname': ['', Validators.required],
    'lastname': ['', Validators.required],

     // address for shipment
    'name2': [''],
    'street': ['', Validators.required],
    'streetnumber': [''],
    'zipcode': [''],
    'city': ['', Validators.required],
    'country': ['', Validators.required],

    // address for billing
    'billingname2': [''],
    'billingstreet': ['', Validators.required],
    'billingstreetnumber': [''],
    'billingzipcode': [''],
    'billingcity': ['', Validators.required],
    'billingcountry': ['', Validators.required],

});

Sam
  • 28,421
  • 49
  • 167
  • 247
  • If you mean you want to create a custom control for an address, you need it to implement [`ControlValueAccessor`](https://angular.io/api/forms/ControlValueAccessor). – jonrsharpe Oct 08 '17 at 11:01
  • 1
    Rahul, my 13K came from c#, not angular :) – Sam Oct 08 '17 at 12:50
  • sounds like you need to implement custom control with controlvalueaccess, I explain in depth how this can be done in [Never again be confused when implementing ControlValueAccessor in Angular forms](https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83) – Max Koretskyi Oct 08 '17 at 12:58
  • if you want to group address fields and then pass them along just use nested `formGroups` for `shipment` and `billing` address. – Max Koretskyi Oct 08 '17 at 12:59
  • The marked duplicate was exactly what I needed, thanks! – Sam Oct 08 '17 at 17:43

0 Answers0