formly-js / angular-formly-templates-lumx

LumX Templates for Angular-Formly
https://af-lumx.herokuapp.com/
MIT License
35 stars 13 forks source link

Angular v7 #17

Closed holtjonathan closed 8 years ago

holtjonathan commented 8 years ago

I got the latest version for formly lumx. If I reference the formlyLumx.js file, I am getting a bunch of validationOptions errors. Looking at the change log, it looks like the index.js file was updated to fix this problem.

So I reference index.js instead of the formly one. Now I am getting the error require is not defined within the index file. It is on this line:

template: require('./fields/lx-checkbox.html')

What am I missing so this formly lumx stuff takes off?

holtjonathan commented 8 years ago

@kentcdodds - Do you have any suggestions?

kentcdodds commented 8 years ago

I'm not sure how @ShMcK has set up this codebase and build system.

holtjonathan commented 8 years ago

Okay. Hopefully @ShMcK can clear up my issue. Putting together a presentation for Wednesday and wanted to include Formly/LumX. May have to just show off Formly minus the fancyness of LumX :(

ShMcK commented 8 years ago

I had forgotten how the codebase was setup as well.

To generate an updated formlyLumx.js:

holtjonathan commented 8 years ago

@ShMcK I'm not too familiar with github and what not. Do I need to download something for webpack to run? It does not recognize this command. I am within the directory that i downloaded all of the LumX/Formly stuff and there is the webpack.config file.

ShMcK commented 8 years ago

First make sure you install all dependencies. npm install. You'll find webpack in the package.json.

ShMcK commented 8 years ago

Basically webpack takes the files from index.js and wraps them as modules.

context: __dirname + '/src',
entry: './index.js',
output: {
    path: __dirname + '/dist',
    filename: 'formlyLumx.js'
}
kentcdodds commented 8 years ago

Shouldn't this be done in a release @ShMcK...? People shouldn't have to build this themselves...

ShMcK commented 8 years ago

Just checking to ensure everything is updated and working, then I'll release.

holtjonathan commented 8 years ago

Awesome. I appreciate the new release. I am not familiar with all of that :)

mattwoolnough commented 8 years ago

The Validation section of the code doesn't appear to have been updated.

Changing USING_TEMPLATE_VALIDATION from true to false in formlyLumx.js turns off the validation section, but this is not desirable. There are some other issue which I will create as a separate issues shortly.

Uncaught Error: angular-formly: formlyConfig.setType apiCheck failed! `value` at `Argument 1` cannot     have extra properties: `validateOptions`.It is limited to `name`, `template`, `templateUrl`, `controller`, ` link`, `defaultOptions`, `extends`, `wrapper`, `data`, `apiCheck`, `apiCheckInstance`, `apiCheckFunction`, `apiCheckOptions`, `overwriteOk`  settype-validation-failed

Plunker here with newly webpacked formlyLumx.js http://plnkr.co/edit/N2cXSHIbZPRA587gHwgB

ShMcK commented 8 years ago

I'm going over it now.

It just needs to be updated in index.js as far as I can tell, to fit the new apiCheck system.

function setFields(formlyConfig, formlyApiCheck) {
    var c = formlyApiCheck;
    if (USING_TEMPLATES) {
      if (USING_TEMPLATE_VALIDATION) {        /* validate options using apiCheck to reduce developer errors */
        addFieldValidationOptions(c);
        FIELDS.map(function (field) {
          formlyConfig.setType({
            name: _prefixer(field.name),
            templateUrl: _fieldTemplateUrl(field.name),
            apiCheck: function (options) {
              options.data.apiCheck = formlyApiCheck.warn(formlyApiCheck.shape({templateOptions: formlyApiCheck.shape(field.templateOptions || {}).optional}), arguments);
            }
          });
        });
kentcdodds commented 8 years ago

That's not quite right @ShMcK, it should be:

        formlyConfig.setType({
            name: _prefixer(field.name),
            templateUrl: _fieldTemplateUrl(field.name),
            apiCheck: function (check) {
              return {
                templateOptions: {
                  label: check.string.optional // or whatever else you want to check using api-check's API
                }
              };
            }
          });

It's significantly different from the original validateOptions api...

ShMcK commented 8 years ago

I'll have to take a look at it again after work today. I've made some progress towards the necessary changes.

@kentcdodds any chance you could take a look in src/index.js to see what the persisting issue might be?

ShMcK commented 8 years ago

Version 2.0.3 is working now.

However, I had to disable API-check as it was causing issues. I hope to have a version with a working API-check in the near future.

mattwoolnough commented 8 years ago

Excellent!

holtjonathan commented 8 years ago

Great news! Thank you very much @ShMcK

kentcdodds commented 8 years ago

Hey @ShMcK, I think to fix the issue, you'd change this to:

apiCheck: field.apiCheck
ShMcK commented 8 years ago

How functional! Everything should be working now with apiCheck. Thanks!

kentcdodds commented 8 years ago

Thank you for putting in the time @ShMcK :-) I understand that it can be hard sometimes.