Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there any method to update FormBuilder's components without re new a FormBuilder?

See original GitHub issue

const builder = Formio.builder(document.querySelector('#form'), {}, options);

Now I want to update the initial components, is there a method like

const myComponents = [
  {
    label: 'Text Field',
    allowMultipleMasks: false,
    showWordCount: false,
    showCharCount: false,
    tableView: true,
    type: 'textfield',
    input: true,
    key: 'textField',
    widget: {
      type: ''
    }
  }
];

builder.updateComponents(myComponents);

I have tried builder.clear() and builder.build({components: myComponents}), but it not work.

Issue Analytics

State:
Created 5 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

3reactions

marcus-at-localhostcommented, Dec 7, 2019

In case someone desperately searches for code samples of how to update the form builder at runtime (after saving data somewhere and return ids and store them in components.*.properties.id or whatever) I put a demo together on how to use builder.setForm() to set a schema programmatically.

const myComponents = [
  {
    label: 'Text Field',
    allowMultipleMasks: false,
    showWordCount: false,
    showCharCount: false,
    tableView: true,
    type: 'textfield',
    input: true,
    key: 'textField',
    widget: {
      type: ''
    }
  }
];

// initialize formio
var builder = new Formio.FormBuilder(document.getElementById('builder'), {}, {
  noDefaultSubmitButton: true,
});

builder.instance.ready.then(function() {
    
    // Set schema 
    builder.setForm({components: myComponents});
  
    builder.instance.on('saveComponent', function() {
		// save builder.instance.schema.components somewhere, or whatever...
		builder.setForm({components: changedComponents});
    });
});

https://codepen.io/localhorst/pen/BaaEBZz

At this point, I have no clue why I have to use new Formio.FormBuilder() instead of Formio.builder() and a mix of builder.instance.* and builder.setForm(). I hope devs can shed some light on this or extend the docs. I hope this helps someone.

0reactions

travistcommented, Nov 5, 2018

Hey @kokororin , if builder.setForm() is working for you, then I can confirm that this is the correct way to do it and it should be good. Let us know if it is still a problem and we will elevate the ticket in our internal system.

Top Results From Across the Web

Manually Set Value for FormBuilder Control

There are two ways to update the model value: Use the setValue() method to set a new value for an individual control. The...

Updating Angular Forms with patchValue or setValue

If you're still guessing which method to use to update a Reactive Form value in Angular, then this post is for you. It's...

FormBuilder

Returns a FormBuilder in which automatically constructed @see FormControl} elements have {nonNullable: true} and are non-nullable.

Using FormBuilder In Angular

Import the FormBuilder class from the @angular/forms package. File name : employeeDetails-editor.component.ts. 1import ...

The updateOn Option in Angular Forms

When using Angular Forms, by default, on every keystroke, the values of your form controls are updated and their associated validators are executed....