I am wanting to create an angular form dynamically from json.
This form has a variety of field types (input, date, number, select)
These field types can also be secondary conditional fields based on select values. (See formData.js)
The form needs root level objects in the FormGroup in angular, but also needs FormArrays for fields that the user can add more of (multiSelect:true in the data).
I have it working to render the top level fields, and the mutliselect fields.
The issue is when I am trying to render the conditional fields and have it work in a structure of angular Forms values collection.
I have put together a stackblitz of the form element of my application.
The form is built in a loop from the formData, with a dynamic Field Directive using factoryResolver to create the components.
The error I specifically get is control.registerOnChange is not a function. The angular form Object has all the fields where they are needed in this iteration including multiselect fields.
But the conditionals don't currently render.
Any help on this would be appreciated, and if any more information is needed let me know.
https://stackblitz.com/edit/angular-bxznoc
Related
I build a custom form control composed of 3 mat-select as shown on the following demo:
Stackblitz
I want to make only month and year field required and make the day field optional in this form control. The examples are generally apply the required to all the components in that user control. But instead of applying to all of 3 select lists, I just want to make required 2 fields of them.
So, how can I do this?
If it's possible, you should use angular forms in the DateSelect component as well and pass the value of the form to the onChange function. This way you have control over every input field individually. Mixing angular forms and binding can unnecesarily complicate things.
I'm building a form editing page using the Formio editor and renderer.
I'd like to make specific form fields mandatory in the form editor. [different than making the field entry mandatory during submission]
There are two roles in the application -
Editor - Modifies the formio definition.
User - Submits the form data.
I'm specifically interested in making several 'meta-data' fields mandatory for the Editor. The Editor should not be able to remove certain fields from the formio component list.
A couple options I'm considering for implementation -
When the form is saved, inspect the form components and ensure the mandatory fields exist, and if they dont, create them.
Set a flag in the UI for specific components so they are 'disabled' and cannot be removed in the formio editor.
Has anyone implemented this?
You seem to be going in the right direction.
You can definitely do (as you suggested):
When the form is saved, inspect the form components and ensure the mandatory fields exist, and if they dont, create them or throw an error
Along with this, you can also extend the form builder and remove the "remove" icon that appears in the builder next to these mandatory components.
To do this,
Add a custom property to all the components, something like "customIsMandatory"
Modify the options.templates of the WebformBuilder to show a different template (one with "remove" icon removed) if the "customIsMandatory" is true for this component.
You can pre-populate these mandatory components in the builder and make sure that this property is set to true for them.
I have two reactive forms that are very similar. I'd like to share markup code for the fields between these to forms. The problem is when I move fields to an ng-template element, I get an error because I have defined formControlName on the elements when they are not wrapped by an element with formGroup set.
How can I share field markup between forms with Reactive Form?
I've made a basic stackblitz to represent the issue: https://stackblitz.com/edit/angular-w3qqqb
I know this can be done with template forms but I'd like to use reactive forms.
I've been experimenting with Symfony forms for some time. Without a doubt Symfony's FormType is a great feature which help create robust forms, especially with related entities (eg. ManyToMany, OneToMany etc.). The FormType makes my job a lot less complicated and easy when it comes to persistence. One of these case is the embedded forms, where u have multiple(lets say Category and Tag) entities with ManyToMany relation. Using FormType, I can create a 'Select dropdown' field using ChoiceType form field to choose category from, embed another CollectionType field with multiple 'text input' fields to accept multiple tagname, and finally a submit button. All I need is to add the cascade = {persist} option using annotations on the categoryname property of the Category entity and Wallah!
Now what if I wanted to create a single input field which can accept multiple tags, instead of having multiple input fields. Like this:
To do this I can create an <input> element using CollectionType form field, and then in my html.twig I can insert the javascript(jquery/AngularJS) dependency as attributes.
This can be done by using jquery Chosen or Select2 https://www.sitepoint.com/jquery-select-box-components-chosen-vs-select2/
or by using AngularJS ngTagsInput component http://mbenford.github.io/ngTagsInput/
Not just this particular case, I know that jquery delivers almost everything u want to do on the client side, and works good with Symfony, but I've been looking into AngularJS for some time now and it is undoubtedly true that it is further a step ahead of jquery or any other javascript framework. Thus my opinion is a little biased towards AngularJS.
The thing is, jquery(Chosen/Select2) uses <select> element and the AngularJS(ngTagsInput) uses custom <tags-input> element to display this field. Although with AngularJS I can make some elementary changes and convert the <tags-input> element to <div ngTagsInput> but I can't convert it to <input ngTagsInput> because the standard HTML<input> element has no closing tag, thus many features like auto-complete don't work. Customizing ngTagsInput & autoComplete directives (AngularJS)
Problem: For Symfony to persist the CollectionType field input in the standard way I need to use the <input> element to display the field.
Questions:
How do I make this work?
How compatible are Symfony and AngularJS? And is it recommended to use them together?
All help is appreciated.
Thanks in advance!
I am trying to create a many to many form field modification using the following cookbook entry:
http://symfony.com/doc/current/cookbook/form/dynamic_form_modification.html#dynamic-generation-for-submitted-forms
The idea is simple that I have the entities VendorKind, Vendor & Event. So in the event creation form, I want a field to show the values of VendorKind in a select field and based on the input, it will show the vendors values in a multi-select field.
Now since there isn't only one kind of vendor in an event (VendorKind). I want to create a custom Symfony2 form field that shall consider the select and the corresponding multi-select field as one. Which I can then use as a collection and add as many as I want using prototype.
Please let me know if this is possible using custom field type?