Add own complicated form items into drupal form - javascript

In Drupal, we can use hook_form_alter to add additional items in a form.
But if I have some form items, which is very difficult to use Drupal form API to express them. How to add them into the form ?
I have a complicated nested select, checkbox from category, to type, to item control, and
also include JavaScript to control their display.

Define your own element. An example of this is in the drupal examples module.

Related

How can make I fields mandatory during Formio editing?

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.

Angular Form nesting and conditional field issues

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

Angular 2 - Get form control validators

I just want to know how to get the list of validators of a form control?
I have a custom validator wherein it will only take effect after a certain condition. My plan is to fetch the list of validators of the form control and push the custom validator that I created.
Thank you!
You can't get the validator list, since it's an internal list of functions.
You can inspect the control.errors for the current list of active validators.

Customising Symfony2 CollectionType Form field display

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!

Nested form sealization is not working in Jquery

I am developing a web application. I have a page with a form, form1, and I am pushing another page which also has a form, form2, inside form1. Both the forms have some values. I want to serialize both the forms. When I specify the root form (form1) like $('#form1').serialize(); it serializes the root form (form1) only, not form2.
If specify like this $('#form1, #form2').serialize(); and $('form').serialize(); it sealizes all the forms.
What is wrong with this jQuery $('form1').serialize(); which serializes root form only, not form2?
I tried with a jsFiddle example, in which it works fine. What could be the issue in my web application form?
Nested forms are not allowed in HTML. jQuery isn't designed to handle them. Don't create them.
Even it is not supported for your purpose you can use :input selector.
$('#form1 :input').serialize();
for the performance using filter highly recomended.
$('#form1 > *').filter(':input').serialize();
If you can explain why you are using nested forms maybe we can suggest some workaround. for example if you only use the second form for AJAX request you can cover it by a div to easily select or give those form items an extra class and use the similar selector for them.

Categories