CODEWITHSUNDEEP
angularjsdrupal
tyler.frankenstein
tyler.frankenstein

Reputation: 2354

directive link not populating form input with value

I have a directive called dgFormElement with a link that dynamically generates a single form input's html string, then compiles that input into the element:

myApp.directive("dgFormElement", function($compile, $injector) {
    return {
      link: function($scope, $element) {

        var html = '';

        // Dynamically build the form input html string here, then...
        // ...
        // ...

        // Compile element.
        var linkFn = $compile(html);
        var content = linkFn($scope);
        $element.append(content);

      }
    };
});

Earlier in the app (in another directive, not in a controller), values have been placed into the scope, and are available in the link's $scope:

console.log($scope.nid); // 123
console.log($scope.title); // Hello World

Here is some sample html output:

<form id="node_edit" class="ng-pristine ng-valid ng-scope">

  <div dg-form-element="">

    <input type="hidden" name="nid" value="123" ng-model="form_state.values['nid']" ng-init="form_state.values['nid'] = nid" class="ng-pristine ng-untouched ng-valid ng-scope">

  </div>

  <div dg-form-element="">

    <input type="text" name="title" value="Hello World" ng-model="form_state.values['title']" ng-init="form_state.values['title'] = title" class="ng-pristine ng-valid ng-scope ng-touched">

  </div>

  <div dg-form-element="">

    <button data-ng-click="dg_form_submit(form_state);" type="button" >Save</button>

  </div>

</form>

At this point there is a problem... when the page renders, the text input does not contain Hello World.

Leaving the text field empty and submitting the form, the following values come through to the submit handler (dg_form_submit):

{
  values: {
    nid: 123
  }
}

However, if I type something (e.g. foo) into the text field then submit the form, the following values come through:

{
  values: {
    nid: 123,
    title: 'foo'
  }
}

Why is the Hello World string not being loaded into the text input when the page loads?

If I remove the ng-model from the text input, the Hello World text is loaded properly:

<input type="text" name="title" value="Hello World" ng-init="form_state.values['title'] = title" class="ng-pristine ng-valid ng-scope ng-touched">

But then during form submission, the title value isn't available, only the hidden value is available:

{
  values: {
    nid: 123
  }
}

It's interesting the hidden value is always coming through, but not the text value.

SOLVED

After much trial and error, I found out that I only need the ng-init directive on hidden inputs, and that I was accidentally overwriting $scope.nid and $scope.title much later in the app.

Upvotes: 0

Views: 691

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69915

It is because you have set ng-model on the input element. When angular compiles the html it will set the input value based on the value of ng-model.

I see that you have set the initial value of form_state.values['title'] to title but where is this variable title defined?

If you want to initialize it with a hard coded string then you have to specify it in quotes.

Try this.

<input type="text" name="title" ng-model="form_state.values['title']" ng-init="form_state.values['title'] = 'Hello World'" class="ng-pristine ng-valid ng-scope ng-touched">

Demo http://plnkr.co/edit/sHS2qvkY0ctXlB1ge5gn?p=preview

Upvotes: 1

Related Questions