Angular Component two way binding not working

Question

My component code:

(function () {
  'use strict';

  function SubscribeController(toaster, EmbHTTPFactory) {
    var ctrl = this;

    ctrl.submit = function () {
      EmbHTTPFactory.subscribeToNewsletter(ctrl.email).then(function (res) {
        toaster.pop('success', "User successfully subscribed");
      },function (err) {

      });
    }
  }

  var app = angular.module('24hourdigitizing'),
      config = {
        templateUrl: "app/views/components/form-component.html",
        controller: ['toaster', 'ng24hdDigitizing.factories.EmbHTTPFactory', SubscribeController],
        bindings: {
          label: '<',
          button: '<',
          action: '<',
          classname: '<'
        }
      };

  app.component('formComponent', config);

}());

Template HTML

<div class="container">
        <div class="row">
            <form action="" name="formElement" class="form-element">
                <div class="form-group no-margin">
                    <label for="email" ng-if="$ctrl.label">{{ $ctrl.label }}</label>
                    <div class="">
                        <input class="form-control input-lg"
                               type="text"
                               id="email"
                               name="email"
                               ng-modal="$ctrl.email"
                               placeholder="Email..."
                               ng-required="true"
                        >
                    </div>
                    <button
                            type="button"
                            class="btn btn-primary btn-lg"
                            ng-disabled="formElement.$invalid"
                            ng-click="$ctrl.submit()"
                    >{{ $ctrl.button }}</button>
                </div>
            </form>
        </div>
    </div>

Issue: As far as I know the $ctrl.email should be a two way binded variable. But whenever I submit the form I am getting undefined. In the code ctrl.email is undefined.

Can anyone please explain if I am doing something wrong on this?

Nikolaj Dam Larsen · Accepted Answer · 2017-10-14 18:33:57Z

1

There is typo, it should be

ng-model="$ctrl.email"

instead of ng-modal

edited Oct 14, 2017 at 18:33

Nikolaj Dam Larsen

5,7146 gold badges37 silver badges46 bronze badges

answered Oct 14, 2017 at 13:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Component two way binding not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related