How to use array of objects for controls in Reactive Forms

by

You need to add a FormGroup, which contains your label and value. This also means that the object created by the form, is of the same build as your fields object.

ngOnInit() {
  // build form
  this.userForm = this.fb.group({
    type: this.fb.group({
      options: this.fb.array([]) // create empty form array   
    })
  });

  // patch the values from your object
  this.patch();
}

After that we patch the value with the method called in your OnInit:

patch() {
  const control = <FormArray>this.userForm.get('type.options');
  this.fields.type.options.forEach(x => {
    control.push(this.patchValues(x.label, x.value))
  });
}

// assign the values
patchValues(label, value) {
  return this.fb.group({
    label: [label],
    value: [value]
  })    
}

Finally, here is a

Demo

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. Angular: composite ControlValueAccessor to implement nested form
  6. How to make ‘submit’ button disabled?
  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. When should I use GET or POST method? What’s the difference between them?
  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. Mask for an Input to allow phone numbers?
  15. How is mime type of an uploaded file determined by browser?
  16. What’s the difference between “Request Payload” vs “Form Data” as seen in Chrome dev tools Network tab
  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. Cleanest way to reset forms
  22. HTML slider with two inputs possible?
  23. What is the right way to POST multipart/form-data using curl?
  24. within not entirely working, only the last is processed
  25. Pass custom options to a symfony2 form
  26. Avoid modal dismiss on enter keypress
  27. Angular reactive Form error: Must supply a value for form control with name:
  28. How does Chrome detect Credit Card fields?
  29. Add span inside form’s placeholder
  30. How to keep changed form content when leaving and going back to HTTPS page? (works with HTTP)

Leave a Comment