Passing Reactive Form Fields as Prop to Component - javascript

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.

Related

Making a custom form control field required

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.

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

form controls are hidden when adding form tags

So, I'm having a little issue here with angular and forms
I'm creating a dynamic form, and it works correctly, but I needed to add some validations.
So I started to follow this guide and I set it up correctly, but when I set the form tags to surround my form controls, I'm getting a blank form
But, if I comment the form tags, I get my form perfectly
Any idea of why this is happening???
I have a couple of validation to show fields based on values, like
custConfig is part of the scope, could the name of the form be interfering with the retrieval of the custConfig variable? and if its such, how can I fix this?
Thanks
Your using a repeater
ng-repeat="deliver in shipmentDetails"
Do you have anything in your object shipmentDetails array? if not then the form will not show anything

Binding dynamic form values with vue.js

I've built a dynamic set of form inputs using vue.js, where the form inputs are generated from an external list of inputs.
My problem is that I don't see how I can bind the input values back to the vue model, so that the vue instance can access / interact with the form values.
I've created a basic fiddle to give you the idea here: https://jsfiddle.net/gzprj5ef/
Is it possible to update the vue instance with the form values?
You have to remove double brackets when you are using v-model.
Here is the updated jsfiddle
You can use v-model="input.value", and you can take a result in variable 'inputs'.

Categories