I'm try to create a custom field & not sure how easy/hard/possible it is to do. I'm pretty inexperienced with angular which is probably half my problem.

Can anyone point me in the right direction?

Hi ,
In recent finding , I observed that while submitting the form having datetime component for date of birth the date submitted to the server got reduced by 1 . Why this unusual behaviour ,can someone look into the issue and suggest workaround or a fix.
Form IO version we are using is
"angular-formio": "^2.0.0-rc.3",
Thanks,

I am getting this error:

angular.js:14642 TypeError: Cannot read property 'baseUrl' of undefined
at new 228.module.exports.app.config.formioComponentsProvider.register.controller (formio.js:16948)
at Object.instantiate (angular.js:5055)
at $controller (angular.js:10975)
at new 240.module.exports.formioComponents.controller (formio.js:18596)
at Object.invoke (angular.js:5040)
at $controllerInit (angular.js:10960)
at nodeLinkFn (angular.js:9840)
at angular.js:10248
at processQueue (angular.js:17000)
at angular.js:17044

code itself on the line 16946 is
```
case 'resource':
var url = '';
var baseUrl = $scope.options.baseUrl || Formio.getBaseUrl();
//var baseUrl = Formio.getBaseUrl();

$scope.options is undefined
Looking around the code, it has been resolved in many places with code 
`$scope.options = $scope.options || {};`

ng-formio v2.20.3

is it compulsory to have formio account for form rendering. As i have to save generated json from form builder to database

Hi
How can I add custom component.
thanks

In some reason wizard "next" button throws error:

vendor.f5d32e3d.js:5 TypeError: Cannot read property '$valid' of undefined
at o.a.isValid (vendor.f5d32e3d.js:23)
at o.a.checkErrors (vendor.f5d32e3d.js:23)
at o.a.next (vendor.f5d32e3d.js:23)
at fn (eval at compile (vendor.f5d32e3d.js:7), :4:203)
at b (vendor.f5d32e3d.js:5)
at e (vendor.f5d32e3d.js:8)
at o.$eval (vendor.f5d32e3d.js:6)
at o.$apply (vendor.f5d32e3d.js:6)
at HTMLAnchorElement. (vendor.f5d32e3d.js:8)
at HTMLAnchorElement.dispatch (vendor.f5d32e3d.js:2)

Week ago it worked perfectly and i haven't done changes during this time.
Angular 1.5, ngFormio, wizard rendering.

I have some save for later functionality I'm trying to implement, so I'm looking for a way to get a hold of the current submission data for a given form.

Right now I pass in an initial data object using the submission attribute on the formio component, which works great to initialize the form. I was hoping that this object would be data bound to and reflect the data the user enters in the form, but that doesn't appear to be the case.

Is there another way to get a handle on the underlying model without actually submitting the form?

I installed and imported all the dependencies

I not only use the full installation method

I put , it just does not show up.

And the console gives me a lot of errors related to the import of all the dependencies, e.g.
1.angular-sanitize.js:602 Uncaught TypeError: angular.module(...).provider(...).info is not a function
2.Error: [$compile:iscp] http://errors.angularjs.org/1.3.13/$compile/iscp?p0=formio&p1=options&p2=%3C
3.agular.js:11607 Error: [$injector:unpr] http://errors.angularjs.org/1.3.13/$injector/unpr?p0=%24animateCssProvider%20%3C-%20%24animateCss%20%3C-%20.item-animation

Hi,
it seems the demo is not working correctly after the latest update. If you drag a component onto the builder, the preview is not rendering it any more.

I wonder if formio still supports angular1 because after a lot of trial, i still cannot get or shown on the webpage.

I generated a Angular1 project from form.io's website, and I believe this automatically generated project they give me should have all the dependencies, and I just put and in html. It just does not show up.

Regards,
Ziwen

Description: When updating a form field where the default value is set, selecting a new item from the typeahead search list does not replace the default value. It is only possible to update the select value when scrolling through the standard dropdown list and clicking an item.

1. Set up a form that uses the Select Component (Data source URL) and a valid default value.
2. Navigate to the form, and note that the default value is set
   
3. Click on the dropdown, the standard drop down should appear
4. Type in another valid select option, the typeahead search dropdown appears with results
   
5. Choose one of the typeahead dropdown options (either by keyboard or mouse click)
6. After the option is chosen the typeahead dropdown disappears, but the default value remains
   

Other aspects to note: This bug does not happen when the source is the JSON file. All other settings of the component are default, except where needed to take in the URL data.

We tried to play with the formio codepen to check whether the features could be a nice addition to our current project.

What bothered us is that in case of a "wizard" the generated "Submit Form"-button only displays the error message "Invalid alias".
After some messing around we got a local form builder and renderer up and running which displays the same error when trying to submit a wizard via the generated "Submit Form"-button. On another note we found out a "Submit"-button manually added to the wizard's last page submits the form as expected.

Is there a specific event/callback one need to define? What exactly does "Invalid alias" even mean?

In select component, setting the refreshOn property to Any Changes breaks the component behaviour when using JSON or URL as datasource. The component never gets initialised, and does not get populated after changes on other inputs.

I think this maybe caused by these lines of code in file src/components/select.js.

if (settings.refreshOn) {
  if (settings.refreshOn === 'data') {
    $scope.$watch('data', refreshItemsWhenReady, true);
    return; // HERE! Remember this return statement
  }

  $scope.$watch('data.' + settings.refreshOn, refreshItemsWhenReady);
  $scope.$watch('submission.data.' + settings.refreshOn, refreshItemsWhenReady);
}

I think so because above those lines, the refresh items function is defined like this:

$scope.refreshItems = function() {
  return $q.resolve([]);
};

And below those lines, refreshItems is redefined according to the selected datasource:

switch (settings.dataSrc) {
  ...
  case 'json':
    ...
    $scope.refreshItems = function(input, url, append) {
       ...
    }
  case 'url':
  case 'resource':
    ...
    $scope.refreshItems = function(input, newUrl, append) {
      ...
    }
    ...
}

When Any Changes is selected, settings.refreshOn will be 'data'. Because of that, the return in line 258 does not allow $scope.refreshItems to be redefined according to the datasource, producing this unexpected behaviour.

How to create a dynamic form as User instead of developer.

I am trying to build a Quiz-Maker application and exploring the option of using "Formio" for this purpose. Please advise if this is a good fit or not a good fit.

Hi,

I noticed a strange behaviour of "select" component in iphone 5 having ios 10.0 .
The issue is reproducible in the above configuration only .
For the same will attach the screenshots also .
So kindly help me out in this issue.

I using ngformio to generate form for user input data. I want to display form content with data in email, so i need to get form content in html include component's data. But when user submit form the html content i retrieve only form html without data. So how can i get form content in html with data when form submited. Thanks alot!

URL uploading is complaining in current ng-formio version:
"File Upload URL not provided".
Althought url attribute is provided and storage type is "url".

The problem:
$scope.formio is not initialized because src attribute is empty in ng-formio element.

I suspect, problem location is here:
// FOR-71
if (!$scope._src && !$scope.builder) {
$scope.$watch('src', function(src) {
if (!src) {
return;
}
$scope._src = src;
$scope.formio = FormioScope.register($scope, $element, {
form: true,
submission: true
});
});
}

The workaround is to just put something into src attribute value:
<formio form="formFile" src="'something'" submission="submission"></formio>

I added new survey on form, and then I try to open submission, only last value is selected

angular.js:14642 TypeError: Cannot read property 'baseUrl' of undefined
at new controller (formio.js:15713)
at Object.invoke (angular.js:5040)
at $controllerInit (angular.js:10960)
at nodeLinkFn (angular.js:9840)
at compositeLinkFn (angular.js:9149)
at compositeLinkFn (angular.js:9152)
at publicLinkFn (angular.js:9014)
at lazyCompilation (angular.js:9405)
at boundTranscludeFn (angular.js:9192)
at controllersBoundTransclude (angular.js:9959)

different line now 15713 :)
there may be more of those...

formio rendering using src="'http://localhost:8107/api/forms/1'"(this is api call to json schema of form from DB) from my server is not working.
But if use src="'https://yjjwubnkdmwcedm.form.io/customer'" from Form.io works properly.

How does one make a checkbox checked by default? I've tried setting defaultValue to true, and it doesn't seem to do the trick?

http://codepen.io/heathdutton/pen/YNBKQN?editors=0010

Hello!

formio-complete.min.js:53 WARNING: Tried to load angular more than once.

This is my "app":

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script type="text/javascript" src="//npmcdn.com/ng-formio@latest/dist/formio-complete.min.js"></script>
</head>
<body>
    <div id="main">
        <p>Content.</p>

        <formio style="outline: 2px solid green;" src="'https://gyxqbhairwmxoyw.form.io/contact'"></formio>
        <script type="text/javascript">
            angular.module('formioApp', ['formio']);
            angular.bootstrap(document, ['formioApp']);
        </script>

When using the following parameters when displaying submissions, the Submit button on a form is hidden:

read-only=true
hide-components = ['submit']

It is also disabled when using read-only without using 'hide-components' .

Yet, the Add Another button remains visible when the above parameters are set.

Hello, I have a probleme when updating my form with the rendering.
This is the function that update the $rootScope.form
$scope.change = function () { $rootScope.form = {"components":[{"input":true,"tableView":true,"inputType":"number","label":"Numéro point d'analyse","key":"numropointdanalyse","placeholder":"numéro point d'analyse","prefix":"","suffix":"","defaultValue":"","protected":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":false,"min":"","max":"","step":"any","integer":"","multiple":"","custom":""},"type":"number","$$hashKey":"object:207","tags":[],"conditional":{"show":"","when":null,"eq":""}},{"input":true,"inputType":"checkbox","tableView":true,"hideLabel":true,"label":"Présence sur le cheminement d'un obstacle non permanent ?","datagridLabel":true,"key":"prsencesurlecheminementdunobstaclenonpermanent","defaultValue":false,"protected":false,"persistent":true,"hidden":false,"name":"","value":"","clearOnHide":true,"validate":{"required":false},"type":"checkbox","$$hashKey":"object:247","tags":[],"conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Quantitatif :","key":"quantitatif","placeholder":"Quantitatif","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":false,"minLength":"","maxLength":"","pattern":"","custom":"","customPrivate":false},"conditional":{"show":"","when":null,"eq":""},"type":"textfield","$$hashKey":"object:379","tags":[]},{"input":true,"tableView":true,"label":"Notes","key":"message","placeholder":"Ajouter une note","prefix":"","suffix":"","rows":3,"multiple":false,"defaultValue":"","protected":false,"persistent":true,"validate":{"required":false,"minLength":"","maxLength":"","pattern":"","custom":""},"type":"textarea","conditional":{"show":"","when":null,"eq":""},"$$hashKey":"object:19","hidden":false,"wysiwyg":false,"clearOnHide":true,"tags":[]},{"type":"button","theme":"primary","disableOnInvalid":true,"action":"submit","block":false,"rightIcon":"","leftIcon":"","size":"md","key":"submit","tableView":false,"label":"Submit","input":true,"$$hashKey":"object:20"}],"display":"form"} }

Here is my code :
https://jsfiddle.net/ktosxhou/

click in the top button to fire the change event

Codepen for reference: http://codepen.io/blackbaud-jeremymorgan/pen/WogMeM

It seems that the "default" field is always set in the model, whether or not there is a preexisting value.

I have the following form schema which has a grid component called products

Schema/Form

{"components":[{"type":"columns","conditional":{"when":null,"eq":"","show":null},"input":false,"key":"Test","columns":[{"components":[{"suffix":"","persistent":true,"inputType":"text","inputMask":"","key":"firstname","defaultValue":"","multiple":false,"prefix":"","input":true,"tableView":true,"type":"textfield","unique":false,"placeholder":"","validate":{"custom":"","customPrivate":false,"required":true,"maxLength":"","pattern":"","minLength":""},"conditional":{"when":null,"eq":"","show":null},"label":"First name","protected":false}]},{"components":[{"suffix":"","persistent":true,"inputType":"text","inputMask":"","key":"lastname","defaultValue":"","multiple":false,"prefix":"","input":true,"tableView":true,"type":"textfield","unique":false,"placeholder":"","validate":{"custom":"","customPrivate":false,"required":false,"maxLength":"","pattern":"","minLength":""},"conditional":{"when":null,"eq":"","show":null},"label":"Last name","protected":false}]}],"lockKey":true},{"suffix":"","multiple":false,"inputType":"text","inputMask":"","defaultValue":"","key":"bela","prefix":"","persistent":true,"input":true,"tableView":true,"type":"textfield","unique":false,"placeholder":"","validate":{"custom":"","customPrivate":false,"required":false,"minLength":"","pattern":"","maxLength":""},"conditional":{"when":null,"eq":"","show":null},"label":"Bela","protected":false},{"type":"panel","title":"Panel 2","theme":"default","components":[{"dir":"applications","conditional":{"when":null,"eq":"","show":null},"defaultValue":"","key":"upload","multiple":false,"url":"/upload","storage":"url","tableView":true,"input":true,"type":"file","placeholder":"","persistent":true,"label":"Upload","protected":false},{"suffix":"","inputType":"number","conditional":{"when":null,"eq":"","show":null},"defaultValue":0,"prefix":"","isNew":false,"key":"age","input":true,"tableView":true,"type":"number","validate":{"custom":"","integer":"","max":"","step":"any","multiple":"","required":false,"min":""},"placeholder":"","persistent":true,"label":"Age","protected":false},{"enableDate":true,"persistent":true,"datepickerMode":"day","format":"yyyy-MM-dd","datePicker":{"minMode":"day","initDate":"","datepickerMode":"day","showWeeks":true,"maxMode":"year","yearRange":"20","startingDay":0},"key":"dateapplied","timePicker":{"arrowkeys":true,"minuteStep":1,"readonlyInput":false,"hourStep":1,"mousewheel":true,"showMeridian":false},"input":true,"tableView":true,"type":"datetime","validate":{"custom":"","required":false},"placeholder":"","enableTime":false,"conditional":{"when":"age","eq":"20","show":true},"label":"Date applied","protected":false}],"conditional":{"when":null,"eq":"","show":null},"input":false},{"tableView":true,"label":"","type":"container","tree":true,"components":[{"tableView":true,"label":"Products","type":"datagrid","tree":true,"components":[{"suffix":"","persistent":true,"inputType":"text","inputMask":"","key":"name","defaultValue":"","hideLabel":true,"multiple":false,"input":true,"tableView":true,"type":"textfield","prefix":"","unique":false,"placeholder":"","validate":{"custom":"","customPrivate":false,"required":false,"maxLength":"","pattern":"","minLength":""},"conditional":{"when":null,"eq":"","show":null},"label":"Name","protected":false},{"suffix":"","inputType":"text","inputMask":"","key":"price","defaultValue":"","hideLabel":true,"conditional":{"when":null,"eq":"","show":null},"prefix":"","input":true,"tableView":true,"type":"currency","validate":{"custom":"","multiple":"","required":false},"placeholder":"","persistent":true,"label":"Price","protected":false},{"suffix":"","inputType":"number","key":"qty","defaultValue":0,"hideLabel":true,"conditional":{"when":null,"eq":"","show":null},"prefix":"","input":true,"tableView":true,"type":"number","validate":{"custom":"","integer":"","max":"","step":"any","multiple":"","required":false,"min":""},"placeholder":"","persistent":true,"label":"Qty","protected":false}],"input":true,"persistent":true,"key":"products2","protected":false,"conditional":{"when":null,"eq":"","show":null}}],"input":true,"persistent":true,"key":"products","protected":false,"conditional":{"when":null,"eq":"","show":null}},{"size":"md","leftIcon":"","rightIcon":"","label":"Submit","key":"submit","conditional":{"when":null,"eq":"","show":null},"tableView":false,"type":"button","theme":"primary","action":"submit","block":false,"disableOnInvalid":true,"input":true}],"page":0,"_id":"67"}

Submission

{"data":{"dateapplied":"2016-09-14T21:00:00.000Z","bela":"200","age":20,"upload":[],"firstname":"Felix","products":{"products2":[{"name":"One","qty":1,"price":"20"},{"name":"Two","qty":1,"price":"30"},{"name":"Three","qty":10,"price":"50"}]},"lastname":"Cheruiyot"}}

How I'm calling the directive:

<formio-submission form="form" submission="submission"></formio-submission>

Initializing the app

`var formBuilder = angular.module('formApp', ['formio']).run(["$rootScope", 'formioComponents', '$timeout',
function ($rootScope, formioComponents, $timeout) {

        }]);

    formBuilder.controller('FormCtrl', ['$scope', 'formioComponents', '$timeout',
        function ($scope, formioComponents, $timeout) {
            $scope.submission = null;
            $scope.form = null;
            $scope.ticket_id = window.location.pathname.split('/')[3];

            $scope.loadTicket = function () {
                //Fetch workflow data from the server and feed the schema details
                App.remoteGet('/api/v1/tickets/' + $scope.ticket_id, {}, function (res) {
                    $scope.submission = res.form_data;

                    //Add form and append id to it
                    $scope.form = res.schema;
                    $scope.form['_id'] = $scope.ticket_id;

                    $scope.$apply();
                }, function (err) {
                    console.log(err);
                    App.notifyUser('error', 'Error fetching ticket data')
                })
            };
        }])`

Output

Problem

Note the grid is not shown in the above output

Noticed formio is using the filter formioTranslate which is used to translate some hardcoded strings like error strings and what not.

But it's also being used to translate field labels which could be typed by the user himself
<label>{{ component.label | formioTranslate:null:builder }}</label>

That means that if the user adds a new field with the label "Name", it'd be translated to "Nom, Navn, ..." which might doesn't make sense because that's a string typed by the user himself.

Is there a way to fix this?

The way we tried getting around it was by using a decorator to override the formioTranslate filter, but that doesn't completely fix the problem.

If there is an error in the form, it throws the Fix following errors. Great, I fix the errors and submit it again with no errors and it still says errors remain.

I think the issue lies in that the form is no longer considered pristine and it doesn't go through the validation again to check the form.

I'm finding it in formio.js in $scope.checkErrors() starting around line 12754 in v2.19.5.

On the form there is text input field, with no validations.
All data from the form saved in external DB.
In case User input some number in this field and Submit the form, the form submitted with no issues and data successfully collected from the form.
User open the form with saved data. (Data loaded from DB and passed to form)
Previously saved number, is correctly displayed in the text input field.
When User hit Submit button, the validation occurs:
"CC060 must be longer than -1 characters."

It seems the field is going to be validated(even no validation is configured) only if the entered value is numeric.

Please take a look on attached screenshot:

Hi everyone ,

I am having this difficulty on rendering the form with its submission data As per instruction on this Site
https://help.form.io/faq/advanced/ iv'e used the method #2 on Populating Data To a Form for me to be able to control the data that will display with form.

$scope.submission = {data: { firstName: ‘Travis’, lastName: ‘Tidwell’ }};

but after i use that method its still not rendering the form with its data that i set ? is this a bug or what ?

please help thanks.
#formio

If click on X icon while the file upload still running (see img below)

Error:

Uncaught TypeError: Cannot set property 'status' of undefined
    at XMLHttpRequestUpload.

The error is generated here:
https://github.com/formio/ngFormio/blob/master/src/components/file.js#L259

I think you forgot to add comma after yearColumns: 5

•        yearRange: '20',
  

•        yearRows: 4,
  

•        yearColumns: 5
         minDate: null,
         maxDate: null
  

With text area component, the minimum length and maximum length validations are not being checked on the form. The validation is being checked once I submit but I would of expected it to act similar to the text field where I get a error message under the component.

Repo steps:

1. Insert Text Area component to a form and set the min/max validations to any number,
2. With in the form enter text in this new component that is either under the min validation or over the max validations.
3. No error message appears under the component stating the value is invalid

NOTE - During the submission of the form I will be informed of the invalid form.

Hello,
When i try to change the form object by passing a new one, the formio dont render the form properly
Here is a demo :

https://jsfiddle.net/3mvckzcd/2/

You should click the ' Change' button to fire the new object

Hey all,

Just wondering, how would I go about validating fields based on other fields in the same form? Like, for example, having a start time and end time field, how would I validate that the end time comes after the start time?

hello it seems to be silly question but
i want to translate formio editor,
i dont see a controller at all.
i findout that there is filter name formiotranslate for example:
{{'Radio Value' | formioTranslate}}
i dont know how to use it to translate editor.
i wrote this in translateor.js
var appp = angular.module('formioApp');
var f = appp.filter(formioTranslate);
f.addLanguage('es', esTranslation);
f.use('es');
var esTranslation = {
'Submit': 'Enviar',
'Language': 'Idioma',
'Translations': 'Traducciones',
'First Name': 'Tu nombre',
'Last Name': 'Apellido',
'Enter your email address': 'Ingrese su dirección de correo electrónico',
'Enter your first name': 'Ponga su primer nombre',
'Enter your last name': 'Ingresa tu apellido',
'Valid Email Address': 'dirección de email válida',
'Please correct all errors before submitting.': 'Por favor, corrija todos los errores antes de enviar.',
'required': '{{field}} es requerido.',
'invalid_email': '{{field}} debe ser un correo electrónico válido.',
'error': 'Por favor, corrija los siguientes errores antes de enviar.'
};
and editor didn't show at all.

When a survey has required fields, a general error is shown for the form on submit. But no indication in the survey component. It confuses the users in long forms, because they can not easily identify the error that does not allow them to submit the form.

Hi everyone,
I got the error with api get form resource (https://api.form.io/form?type=resource&limit=4294967295&select=_id%2Ctitle%2Cname%2Ccomponents) in my project.
Then I try the formio demo on this page (http://codepen.io/travist/full/xVyMjo/) and get the same error, pls refer image below.

Can anyone tell me the root cause and how to fix that error?

Thanks.

Hello,

from the this commit @abdallamohamed : SHA: f43b4bc
f43b4bc

I have a issue on my custom translation (for exemple in servicetracker app). My translation is
empty like this {}.

updated
The problem is in the src/filters/translate.js : return $translate(text) (promise)

The translate filter doesn't work: {{ "Day" | formioTranslate:null:builder }}

is there a way to show the wizard step titles on the left side and the rendered elements on the right side?
I have form step titles that are long and they overlap, making the rendered form look ugly.

i don't want to hack around to move the step titles to the left if there is an option that does it in a cleaner way.

Thanks

I am trying to integrate form io in ionic application.

I have installed ngformio using "npm install --save ng-formio". and include dependency in app.js file.Now while running project,
I am getting error "Error: [$injector:modulerr] Failed to instantiate module formio".

Could it be that the client package includes the builder??
//npmcdn.com/ng-formio@latest/dist/formio-complete.js

The Select Component 'Default Value' setting is not working for some 'Data Source Types'. For example, for the 'Custom' Data Source Type it is not working: https://www.screencast.com/users/willemd2999/folders/Share/media/f5175f28-d7b5-4f63-a36d-98341d1d6a83 For the JSON type it is not working either: https://www.screencast.com/users/willemd2999/folders/Share/media/f61b22c7-737d-4946-ad1e-c30383e2298c and it is also not working for the 'Resource' Data Source Type.

(It does work for the 'Values' Data Source Type: https://www.screencast.com/users/willemd2999/folders/Share/media/9d19b4e6-473e-4b6a-bb43-c1190b640870)

Date range is a custom componet added by me.

You can see day component is readonly but Date range is not.

Plunker for reference: https://plnkr.co/edit/Yd8VSRbSRLojY09MrJhY

I noticed when using the date-time control that the custom validation field errors when using String.replace to evaluate form values. While this does work for a good majority of values in other controls, String.replace will take the Date object and slip it into the custom validation code as-is, unquoted and all. This causes a syntax error when evaluated.

Another issue I noticed, when using scope.data in the custom code instead of the bracket notation, and I will make another issue if it helps with tracking, is that the scope values lag behind what has actually been chosen in the date-time picker. Say that when I load the form and select a date (say 11/18/2016), the custom validation code runs but prints 'undefined'. When I select another date (say 11/19/2016), then 11/18/2016 prints in the console.

We are using the latest ng-formio library.
File component is configured as required field.
But no validation error is occurred when submit button is pressed and file field is empty.

How to use onChange event in ngFormio library. Its available only for js and angular 2, 4. What is the syntax to use onChnage for formio.

js
form.on("change", (change)=>{

});

Can we use form render as stand alone.Please help me out.

With the commit 90d015b, a change was introduced to how fields are marked as Required. The isRequired() function is being used instead of component.validate.required.

The function is being passed to the component in this line
$scope.isRequired = $scope.$parent.isRequired;

That works in the form renderer. However, in the form builder, there's no isRequired function. That prevents required fields from getting the class that renders a red asterisk next to the label.
ng-class="{\'field-required\': isRequired(component)}"
That's in the fieldWrap function here.

Any idea how to fix this?

As per the api documentation, a form should fire a formSubmit event before it calls the formio services, allowing a client to access and modify the submission before processing takes place or even cancel the event.

Right now the wizard doesn't fire this event at all, which is blocking some of my work. I've put together a fix which I will submit for review shortly.