json-schema-form / angular-schema-form

Generate forms from a JSON schema, with AngularJS!
https://json-schema-form.github.io/angular-schema-form
MIT License
2.47k stars 653 forks source link

combination of hidden and default inside object #833

Closed gatperdut closed 7 years ago

gatperdut commented 7 years ago

I want to build a (section of a) form which produces the following output:

{
  ...
  offers: {
     context: "http://schema.org",
     minPrice: 3
  }
  ...
}

The catch is, context should always be present - the only field the user gets to manipulate is minPrice. Immediately, a hidden field with a value comes to mind. So here's the schema definition:

$scope.schema = {
  ...
  offers: {
    type: 'object',
    properties: {
      minPrice: {
        type: 'number'
      }
    }
  }
  ...
};

And here the form definition:

$scope.form = [
  ...
  {
    key: 'offers',
    type: 'fieldset',
    items: [
      {
        key: 'offers.minPrice',
        type: 'number'
      },
      {
        key: 'offers.context',
        type: 'hidden',
        default: 'http://schema.org'
      }
    ]
  }
  ...
];

However, observing the generated model it's obvious the entry context is not present. I have successfully used a combination of type: 'hidden' and default with a tabarray, but I just can't get it right with an object. I am using version 0.8.13 of angular-schema-forms - the latest at the time of this writing.

I'd appreciate any insights, thanks.

Anthropic commented 7 years ago

@gatperdut can you display the field or you want it to be hidden?

If the field is in the schema it will work: http://schemaform.io/examples/bootstrap-example.html#/39cc5a4a79c2b938df94fb7b8989ce19

kyse commented 7 years ago

I've used this in the past to achieve hidden fields on the form.

    angular
        .module('schemaForm')
        .config(configHidden)
        .run(templateHidden)
        .directive('sfHidden', sfHiddenDirective);

    configHidden.$inject = ['schemaFormDecoratorsProvider', 'sfBuilderProvider'];
    function configHidden(schemaFormDecoratorsProvider, sfBuilderProvider) {
        sfBuilderProvider.builders.hidden = hiddenBuilder;

        schemaFormDecoratorsProvider.defineAddOn('bootstrapDecorator', 'hidden', 'decorators/bootstrap/hidden.html', [
            sfBuilderProvider.builders.sfField,
            sfBuilderProvider.builders.ngModel,
            sfBuilderProvider.builders.ngModelOptions,
            sfBuilderProvider.builders.hidden,
            sfBuilderProvider.builders.condition
        ]);

        // Hidden Builder - Adds sf-hidden attribute to elements containing ng-model
        function hiddenBuilder(args) {
            var nodes = args.fieldFrag.querySelectorAll('[ng-model]');
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].setAttribute('sf-hidden', '');
            }
        }
    }

    // Add the hidden input to the templateCache
    templateHidden.$inject = ['$templateCache'];
    function templateHidden($templateCache) {
        $templateCache.put("decorators/bootstrap/hidden.html", "<div class=\"form-group schema-form-{{form.type}} {{form.htmlClass}}\"><input type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" schema-validate=\"form\" sf-field-model=\"\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\" value=\"form.value\"></div>");
    }

    function sfHiddenDirective() {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: false,
            priority: 10,
            link: function (scope, element, attrs, ngModel) {
                if (!ngModel)
                    return;

                ngModel.$setViewValue(scope.form.value);
                ngModel.$commitViewValue();
            }
        };
    }
gatperdut commented 7 years ago

Guys, thanks a lot for your replies. Please close this issue and ignore me. I was too tired and put the relevant schema part one level within the json on top of where it should have been. Duh. Not an issue of angular-schema-form.

Anthropic commented 7 years ago

@gatperdut thanks for letting us know