AngularJS - Creating Ad Hoc Web Form from Metadata

Vote count:

0

I've been struggling with a problem that involves building a web form to input answers to questions provided in a JSON resource.

Here's the plunk: http://ift.tt/1qjyiw9

This plunk is a prototype for generating a web form based on structured meta data. A sample of the question meta-data is in-lined in the controller. I've assigned it to a questions variable of the model, and provided a second model object called "answers" where I want to bind the data input into the rendered form.

My goal is to add each question to the answers object as a new property. But I'm stuck on getting the data input into the rendered form bound to the model.

The problem is that I am unable to successfully bind the particular question to the ng-model. The problematic area of the code is in the Link function of the fsQuestionnaireQuestion directive:

var modelLinkId = scope.question.linkId;
var modelAccessor = scope.ngModel + $parse(modelLinkId);

function updateModel() {
  var val = element.value;
  scope.$apply(function(scope) {
    modelAccessor.assign(scope, val);
  });
}

scope.$watch(modelLinkId, function(val) {
  element.value = val;
  });

element.bind('change', updateModel);

The form renders fine, but when I input data into any of the form elements, I get back an "undefined is not a function" error.

asked 1 min ago

PeterB

211

AngularJS - Creating Ad Hoc Web Form from Metadata