Angular: composite ControlValueAccessor to implement nested form

by

Couple issues, on your AppComponent change your FormBuilder to: 

this.form = fb.group({
  name: 'foo bar',
  address: fb.control({ //Not using FormGroup
    city: 'baz',
    town: 'qux',
  })
});

On your AddressFormComponent you need to initialize your FormGroup like so:

form: FormGroup = new FormGroup({
    city: new FormControl,
    town: new FormControl
});

Here’s the fork of your sample: https://stackblitz.com/edit/angular-np38bi

More Related Contents:

  1. Angular2 – Radio Button Binding
  2. Manually Set Value for FormBuilder Control
  3. Angular 2: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  4. Angular 2 – large scale application forms’ handling
  5. How to make ‘submit’ button disabled?
  6. How to use array of objects for controls in Reactive Forms
  7. Angular 4 Form FormArray Add a Button to add or delete a form input row
  8. What causes the “control.registerOnChange is not a function” error
  9. The definitive guide to form-based website authentication [closed]
  10. Adding causes java.lang.IllegalStateException: Cannot create a session after the response has been committed
  11. VBA: Using WithEvents on UserForms
  12. How to use EL with in id attribute of a JSF component
  13. How to prevent robots from automatically filling up a form?
  14. How is mime type of an uploaded file determined by browser?
  15. What’s the difference between “Request Payload” vs “Form Data” as seen in Chrome dev tools Network tab
  16. How to write “Html.BeginForm” in Razor
  17. changing the language of error message in required field in html5 contact form
  18. Symfony2 Setting a default choice field selection
  19. HTML form with multiple hidden control elements of the same name
  20. Can you require two form fields to match with HTML5?
  21. Avoid Angular2 to systematically submit form on button click
  22. HTML5: Slider with two inputs possible?
  23. HTML slider with two inputs possible?
  24. How to open a new window on form submit
  25. Symfony2 invalid form without errors
  26. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  27. Validate fields after user has left a field
  28. Angular reactive Form error: Must supply a value for form control with name:
  29. How does Chrome detect Credit Card fields?
  30. What is copyWith and how can I use it in Flutter and what are it’s use cases?

Leave a Comment