formly-js / angular-formly

JavaScript powered forms for AngularJS
http://docs.angular-formly.com
MIT License
2.22k stars 405 forks source link

Error using defaultValue with a nested model #694

Open icruces opened 8 years ago

icruces commented 8 years ago

Hi, I am using a slightly modified version of the Bootstrap Template. For instance, the radio element type looks:

<div class="radio-group col-sm-8">
  <div ng-repeat="(key, option) in to.options" ng-class="{ 'radio': !to.inline, 'radio-inline': to.inline }">
    <label>
      <input type="radio"
             id="{{id + '_'+ $index}}"
             tabindex="0"
             ng-value="option[to.valueProp || 'value']"
             ng-model="model[options.key].value">
      {{option[to.labelProp || 'name']}}
    </label>
  </div>
</div>

Note that ng-model="model[options.key].value" instead of ng-model="model[options.key]". I do this in order to have a nested model:

{ myKey: { value: myValue, type: string, ... } }

The problem is that if I use the defaultValue property in the form definition I get an error in radio buttons:

TypeError: Cannot create property 'value' on string 'default value'

It seems that the defaultValue property ignores the ng-model attribute that I define in the template.

Shouldn't I define the ng-model in this way? I know that I could define a nested key (key: myKey.value) in the form definition to accomplish the same thing, but I would like to hide that to the final user who defines the form.