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?
There is typo, it should be
ng-model="$ctrl.email"
instead of ng-modal
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.