Error: [$injector:unpr] Unknown provider: apiCheckProvider <- apiCheck

[mishelka]

I installed all the packages (lumx, angular-messages, angular-formly, angular-formly-templates-lumx) and included both css and js files in my app. Also added the dependencies to my module in the same order as described in the tutorial. I started my app and I got the following error in the console: http://prntscr.com/6dureb Apparently the apiCheck is incorrectly injected, or injected at wrong time. Please is there any solution to this?

I use the following dependency versions:

angular - 1.3.14 angular-messages - 1.3.14 lumx - 0.3.20 angular-formly - 4.0.6 angular-formly-templates - 1.2.0

The error doesn't show if I comment the 'formlyLumx' dependency in the module so it has to be the error of the lumx formly library.

[kentcdodds]

Yeah, formly 4.x had a breaking change that the template library hasn't been updated for I guess. Try 3.x

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity) On Mar 7, 2015 11:23 AM, "mishelka" notifications@github.com wrote:

I installed all the packages (lumx, angular-messages, angular-formly, angular-formly-templates-lumx) and included both css and js files in my app. Also added the dependencies to my module in the same order as described in the tutorial. I started my app and I got the following error in the console: http://prntscr.com/6dureb Apparently the apiCheck is incorrectly injected, or injected at wrong time. Please is there any solution to this?

I use the following dependency versions:

angular - 1.3.14 angular-messages - 1.3.14 lumx - 0.3.20 angular-formly - 4.0.6 angular-formly-templates - 1.2.0

The error doesn't show if I comment the 'formlyLumx' dependency in the module so it has to be the error of the lumx formly library.

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-templates-lumx/issues/6.

[mishelka]

With version 3.3.2 the forms build, but there is nothing in the displayed page :(

[kentcdodds]

In that case..... Fork lumx templates and inject formlyApiCheck instead. (At least, I'm pretty sure that's what's it's called.) That's not the preferred solution, but it'll some your immediate problem. I would help more, but I'm about to get a root canal :-(

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity) On Mar 7, 2015 11:35 AM, "mishelka" notifications@github.com wrote:

With version 3.x the forms build, but there is nothing in the displayed page :(

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-templates-lumx/issues/6#issuecomment-77702919 .

[mishelka]

Thank you for your help! The 'formlyApiCheck' solution was not working, but in the end I was able to run the app with 3.3.2. Hope the new version will be available soon :)

[ShMcK]

I've updated the library dependencies in angular-formly-templates-lumx@1.2.1. I think that should take care of the problem.

[ShMcK]

The previous update wasn't sufficient, but I think the issue is solved with angular-formly-templates-lumx@1.2.2. Let me know if there any problems.

[kentcdodds]

Make sure that you are specifying the key property. This is how the template knows what value to be bound to.

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity) On Mar 8, 2015 7:23 AM, "mishelka" notifications@github.com wrote:

Thank you kentcdodds, I was able to use the 3.3.2. version in the end.

Unfortunately, validation is not functioning, no messages are displayed. In this state the library is not usable for me. Hope there will be an update soon.

I also found another little unsolvable problem: I can't create any switch or checkbox with the value bound to the model. It can only be initialized by checked: true or checked: false, but not checked: myModelValue.

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-templates-lumx/issues/6#issuecomment-77748515 .

[mishelka]

@ShMcK thank you, I will try the update in the evening, because I have only mobile internet now, takes too long to download the new version :) @kentcdodds the key property is set correctly. The value of checkbox and switch binds properly on check/uncheck/switch, but the initial value is not correct.

[kentcdodds]

Because it's angular, to default the checked state, just default your model.

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity) On Mar 8, 2015 8:15 AM, "mishelka" notifications@github.com wrote:

ShMcK thank you, I will try the update in the evening :) kentcdodds the key property is set correctly. The value of checkbox and switch binds properly on check/uncheck/switch, but the initial value is not correct.

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-templates-lumx/issues/6#issuecomment-77751065 .

[mishelka]

@ShMcK the library is working properly now, thank you :) But I still can't see any message, only the red color: http://prntscr.com/6edbfm The fields look the same even if I specify the validation option. Am I missing something?

@kentcdodds I'm sorry for my unclear messages. The default state is not a problem. I have model initialized in memory. Example: a list of applicants, each of them has a property "active" of type boolean: http://prntscr.com/6ed5ju When I go to a form where I edit one entity (one from the table), the first displayed value is always unchecked (even if in model the "active" value is true): http://prntscr.com/6ed7fh When I click on the checkbox or switch, it will change the value of the model properly (both the switch and the checkbox change their states simultaneously and I also confirmed it in console log): http://prntscr.com/6ed7zx

In other words, I would like to to something like this (which is not working - checked is always true because "active" is evaluated as a simple non-empty string):

{
  "key": "active",
  "type": "lx-checkbox",
  "templateOptions": {
    "label": "Active",
    "checked": "active"
  }
}

But maybe the problem is not this library, it could be LumX.

[ShMcK]

Sorry for the late response. Timezone difference.

To get the error message underneath make sure you are using the lx-wrapper-errors.

    key: 'someKey',
    wrapper: 'lx-wrapper-errors',
    templateOptions: {}

Also, checked is set to a boolean. True or false.

If you want to set it to a different value, you can use ng-true-value or ng-false-value instead with ng-model-attrs. Woh, that's a lot of ng's. Looking forward to 2.0 now.

[ShMcK]

For example:

{
   key: 'someKey',
  ngModelAttrs: {
    trueValue: {
      bound: 'ng-true-value',
      attribute: 'true-value'
    }
  },
  templateOptions: {
    trueValue: someValue
  }
}

That looks excessive, but I would think true or false cover most use cases.

[ShMcK]

Perhaps if the problem persists, you could post your form-field json in the forum here like you did above. It could be more helpful for understanding.

There are also many code examples to work off of from the demo.

[mishelka]

@ShMcK the problem with the messages was solved! Finally, thank you :dancer: :+1: :+1: :+1:

I have multiple forms, because they are separated by other elements required for formatting (the switch is in the last one):

...//some code
namesForm: [
        { key: 'row', type: 'lx-flex', templateOptions: {flex: {container: 'row', align: 'center space-between'}, fields: [
          { key: 'firstName', wrapper: 'lx-wrapper-errors', type: 'lx-input', templateOptions: {type: 'text', label: 'First name', required: true} },
          { key: 'middleName', type: 'lx-input', templateOptions: {type: 'text', label: 'Middle name'} },
          { key: 'lastName', type: 'lx-input', templateOptions: {type: 'text', label: 'Last name', required: true} },
        ]}},
        { key: 'row', type: 'lx-flex', templateOptions: { flex: { container: 'row', align: 'center space-between' }, fields: [
          { key: 'nationality', type: 'lx-input', templateOptions: {type: 'text', label: 'Nationality', required: true} },
          { key: 'birthday', type: 'lx-date-picker', templateOptions: {type: 'date', label: 'Birthday'}},
        ]}}
      ],

      primaryAddressForm: [
        { key: 'row', type: 'lx-flex', templateOptions: { flex: { container: 'row', align: 'space-between' }, fields: [
          { key: 'street', type: 'lx-input', templateOptions: {type: 'text', label: 'Street'} },
          { key: 'houseNumber', type: 'lx-input', templateOptions: {type: 'text', label: 'House number'} },
          { key: 'city', type: 'lx-input', templateOptions: {type: 'text', label: 'City'} },
          { key: 'zip', type: 'lx-input', templateOptions: {type: 'text', label: 'ZIP'} },
          { key: 'state', type: 'lx-input', templateOptions: {type: 'text', label: 'State'} }
        ]}}
      ],

      secondaryAddressForm: [
        { key: 'row', type: 'lx-flex', templateOptions: { flex: { container: 'row', align: 'space-between' }, fields: [
          { key: 'street', type: 'lx-input', templateOptions: {type: 'text', label: 'Street'} },
          { key: 'houseNumber', type: 'lx-input', templateOptions: {type: 'text', label: 'House number'} },
          { key: 'city', type: 'lx-input', templateOptions: {type: 'text', label: 'City'} },
          { key: 'zip', type: 'lx-input', templateOptions: {type: 'text', label: 'ZIP'} },
          { key: 'state', type: 'lx-input', templateOptions: {type: 'text', label: 'State'} }
        ]}}
      ],

      contactsForm: [
        { key: 'phone', type: 'lx-input', templateOptions: {type: 'text', label: 'Phone number', required: true} },
        { key: 'email', type: 'lx-input', templateOptions: {type: 'email', label: 'Email'} }
      ],

      additionalInfoForm: [
        { key: 'details', type: 'lx-textarea', templateOptions: {type: 'text', label: 'Description'} },
        { key: 'source', type: 'lx-input', templateOptions: {type: 'text', label: 'Source'} }
      ],

      stateForm: [
        { key: 'column', type: 'lx-flex', templateOptions: { flex: { container: 'column', align: 'left' }, fields: [
          { key: 'state', type: 'lx-select',
            templateOptions: {space: true, placeholder: 'State', allowClear: false, selected: 'name', selected2: '', choice: 'name', choice2: 'description',
              options: [{name:  'New', description: 'The candidate is new'}, {name: 'Available', description: 'The candidate is available'}, {name: 'Not available', description: 'The candidate is not available'}, {name: 'No File', description: 'The candidate has no file'}, {name: 'Active', description: 'The candidate is active'}, {name: 'Inactive', description: 'The candidate is inactive'}]
            }
          },
          { key: 'active', type: 'lx-switch', templateOptions: {label: 'Active'} },
        ]}}
      ],
...//some other code

My entity looks like this (see the "active" property):

{
    "resourceId": "appl1",
    "firstName": "Susam",
    "middleName": "",
    "lastName": "Pang",
    "nationality": "Polish",
    "birthday": "2009-04-12",
    "email": "susam.pang@gmail.com",
    "phone": "0123 456 768",
    "active": true,
    "primaryAddress": {
      "street": "Zabraniecka",
      "houseNumber": "18",
      "city": "Warszaw",
      "zip": "03-872",
      "state": "Poland"
    },
    "secondaryAddress": {
      "street": "Obrónców",
      "houseNumber": "2",
      "city": "Warszaw",
      "zip": "",
      "state": "Poland"
    },
    "state": {
      "name": "New",
      "description": "The applicant was just added"
    },
    "details": "She went to a gymnasium. She also went to university (program: chemical substances), but didn't finish.",
    "source": "LinkedIn",
    "attachments": [
      {
        "attachment": {
          "description": "zivotopis",
          "data": "01234"
        }
      }
    ],
    "dateCreated": "2015-02-06T00-00-00",
    "lastUpdated": "2015-02-06T00-00-00"
  },

Example of usage (again, the checkbox is in the end):

...
          <md-subheader><span class="tc-{{primaryColorClass}}-500">Personal info</span></md-subheader>
          <div layout="row" layout-sm="column" layout-align="start center" layout-align-sm="start start" class="edit-card-content">
            <formly-form model="entity" fields="namesForm"></formly-form>
          </div>

          <md-subheader><span class="tc-{{primaryColorClass}}-500">Primary address</span></md-subheader>
          <div layout="row" layout-sm="column" class="edit-card-content">
            <formly-form model="entity.primaryAddress" fields="primaryAddressForm"></formly-form>
          </div>
...
        <lx-tab heading="State">
          <div layout="column" flex class="edit-card-content edit-card-state-select">
            <formly-form model="entity" fields="stateForm"></formly-form>
          </div>
        </lx-tab>
...

The problem with the checkboxes and switches is that the value is incorrectly displayed only the first time. After some clicking, the values are displayed correctly. As if the value is bound, but only after the first click.

[ShMcK]

Excellent! Thanks for posting the issue.

However, the values should display correctly on load. That's still a problem, right?

I'm not totally clear what you need here. Should the value be pre-checked? If you want active pre-checked, set:

{
key: 'active',
type: 'lx-switch',
templateOptions: {
    label: 'active',
    checked: true                    // pre-check
}

You can also just set the value with pre-existing data:

$scope.data = {
    email: '',
   password: '',
   active: true
}

As an added feature, you might also want to look into using some client-side validation to make sure the data is what you want. For example, the phone number or zip code might have to match a regex pattern. Check the 'validation' examples for help.

I'm looking into making some addons for geo-address, country selecting, phone numbers, etc. later when I get some time. That might be helpful as well.

[mishelka]

I'm not totally clear what you need here. Should the value be pre-checked? If you want active pre-checked, set:

No the value should not be pre-checked nor pre-unchecked, it should be true or false according to what's in the entity's "active" value (the entity is already existing in the model and is initialized as seen in my entity example). This is not happening. I'm sorry for my poor verbal skills, I can't explain what's the problem. I think I will try to record a video of the app :)

As an added feature, you might also want to look into using some client-side validation to make sure the data is what you want. For example, the phone number or zip code might have to match a regex pattern. Check the 'validation' examples for help.

I would definitely like to use that! Could you please navigate me to (or post a simple) client-side regex checking example?

I'm looking into making some addons for geo-address, country selecting, phone numbers, etc. later when I get some time. That might be helpful as well.

Looking forward! :+1: :)

[mishelka]

I've already found the examples with validations, thank you :) Anyways, the problem with the incorrectly loaded values could be elsewhere. But it is not related to the primary problem so I'm closing this issue :) Thank you very much for your excellent and prompt help :+1: