I'm trying to set enabled true for "SetOutputCurrentPPLowValue" & "SetOutputCurrentPPHighValue" when "SetAlarmValues" is checked. I have the following code, for this issue:
The fields are disabled when the page is loaded but when the "SetAlarmValues" is checked, they stay disabled. I'm not sure why. Please help!
<!-- ko if: $root.regData -->
<div class="row">
<div class="col-md-2">
<label for="SetAlarmValues" class="control-label">#MSL.Core.Resource.Models.Well.SetAlarmValues:</label>
<input type="checkbox" data-bind="checked: $root.regData().setAlarmValues" class="large-check registration" id="SetAlarmValuesCheck" title="#MSL.Core.Resource.Models.Well.SetAlarmValues" />
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<label for="SetOutputCurrentPP" class="control-label">Set Output Current PP:</label>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-5 form-inline">
<label for="SetOutputCurrentPPLowValue" class="control-label">#MSL.Core.Resource.Models.Well.OutputCurrentPPLowValue: </label>
<input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPLowValue, enable: $root.regData().setAlarmValues()" class="large-check registration" id="SetOutputCurrentPPLowValue" title="#MSL.Core.Resource.Models.Well.SetOutputCurrentPPLowValue" />
<input type="text" id="OutputCurrentPPLowValue" data-bind="value: $root.regData().outputCurrentPPLowValue, enable: $root.regData().setOutputCurrentPPLowValue" class="form-control" maxlength="30" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-5 form-inline">
<label for="SetOutputCurrentPPHighValue" class="control-label">#MSL.Core.Resource.Models.Well.OutputCurrentPPHighValue:</label>
<input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPHighValue, enable: $root.regData().setAlarmValues()" class="large-check registration" id="SetOutputCurrentPPHighValue" title="#MSL.Core.Resource.Models.Well.SetOutputCurrentPPHighValue" />
<input type="text" id="OutputCurrentPPHighValue" data-bind="value: $root.regData().outputCurrentPPHighValue, enable: $root.regData().setOutputCurrentPPHighValue" class="form-control" maxlength="30" />
</div>
</div>
</div>
<!-- /ko -->
And this is the script:
function Registration() {
var self = this;
//Alarms
self.setAlarmValues = ko.observable(false);
self.setOutputCurrentPPLowValue = ko.observable(false);
self.setOutputCurrentPPHighValue = ko.observable(false);
self.outputCurrentPPLowValue = ko.observable("");
self.outputCurrentPPHighValue = ko.observable("");
}
var registerVM = function (countryListJSON, companyListJSON, wellStatusListJSON, territoryListJSON) {
self = this;
self.validation = ko.observableArray([]);
self.savingData = ko.observable(false);
self.regData = ko.observable(new Registration());
}
In your code i see this statement- enable: $root.regData().setAlarmValues(), and the setAlarmValues value is been set to false. It will only enabled once you set the value of the field setAlarmValues to true. But as you mentioned once the checkbox is checked please make sure to check if the value is still false or is it changed to True.
Related
I want to select multiple radio options.New to angularjs.
Steps to produce the issue:
Select any country from the 1st select menu -> Choose Reason A
Select any country from the 2nd select menu -> Choose Reason C
here the above Reason A option disappears and only Reason C is selected.
i want to hold the two different reasons for different countries section.
here is the fiddle
http://jsfiddle.net/Lini7/knfsv64m/8/
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.showReasonA = function showReasonA(checkNoTin) {
console.log("print the notin value from data",this.item.noTin);
if (!this.item.country) return false;
var selectedCountry = this.item.country.country.toLowerCase();
var fourCountries = ["cayman islands", "albania"]
var isIt = fourCountries.indexOf(selectedCountry) >= 0;
console.log("print match country val",isIt);
console.log("get checknotin value before assign",checkNoTin);
if (checkNoTin) this.item.noTin = true;
console.log("final checknotin val",checkNoTin);
return isIt;
}
});
and the view
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
To make some input as hidden you can use
<p ng-show="condition">I'm shown</p>
and this condition value should be initialized in the scope of your controller
$scope.condition=true/false
to hide an show input you can use ng-if. Its better to use ng-if for dynamic inputs . see details here
Now for your case you can use item.reason in the condition to show and hide your input .
<input type="radio" name="reason" ng-model="item.other" ng-value="C" required="required" ng-if="item.reason='object:836'" />
Finally got the solution
I just added the radio button name with index then it worked which will give different names for each group of buttons.
name='reason_{{$index}}'
I am unable to get automatic radio button checked when I edit the User From using following Html and AngularJs Code. When I console {{changeUser}} this returns following data
{"id":1,"username":"Ramesh","password":"Ramesh1#23","role":"admin","active":"no"}. When I load the edit form I have to automatically checked the no radio button in the following code.
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal form-bordered" name="editUserForm" data-ng-submit="userEdit(changeUser)">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username*</label>
<div class="col-md-4">
<input class="form-control" type="text" name="userName" data-ng-model="changeUser.username" value="{{ changeUser.username }}" data-ng-pattern="/^[a-z0-9_ .-]{5,15}$/i" required />
<span style="color:red" class="error" data-ng-show="editUserForm.userName.$error.pattern" >Only letters, integers, and underscores.Minimum 5 characters to maximum 15 characters.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password*</label>
<div class="col-md-4">
<input class="form-control" type="password" name="changePassword" data-ng-model="changeUser.password" value="{{ changeUser.password}}" data-ng-pattern="usersPattern.password" required />
<span style="color:red" class="error" data-ng-show="editUserForm.changePassword.$error.pattern">Minimum of 8 characters, 1 capital letter,1 lowercase, 1 special-case and 1 numeric.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn purple" data-ng-disabled= "editUserForm.$invalid">
<i class="fa fa-check"></i> Edit</button>
<button type="button" class="btn red" data-ng-click="cancelEdit()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
The Controller is
(function (){
"use strict";
function UsersEditController($scope, UserFactory, $http, $location) {
$scope.$on('$viewContentLoaded', function () {
App.initAjax(); // initialize core components
});
$scope.changeUser = {};
$scope.changeUser = UserFactory.get();
$scope.userEdit = function(data) {
$scope.changeUser = data;
console.log($scope.changeUser);
};
$scope.usersPattern = {
password: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%]).{8,20})'
};
$scope.cancelEdit = function() {
$location.path('users');
};
}
UsersEditController.$inject = ['$scope', 'UserFactory', '$http', '$location'];
angular.module('books').controller('UsersEditController', UsersEditController);
})()
And I guess this is your answer (even without js code provided :) )
https://stackoverflow.com/a/18446612/552194
You need to add ng-value and use it instead of the standard value
I have interesting situation Everytime when i open modal window i am reseting the value for below field, but if you select value 2 , 3 times and close modal with 'x' some time value retained in the select field. I am not sure why its happening any idea ?
main.html
<form name="addChallengeForm" id="addChallengeForm" novalidate ng-controller="challengesCtrl" class="border-box-sizing">
<div class="modalForm" disable-control-point="CHALLENGES_EDIT">
<div class="row" ng-show="editMode">
<div class="form-group col-md-12 fieldHeight">
<label for="originatingGroup" class="required col-md-4">Challenge Id:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="challangeId"
ng-model="challengesDTO.riskAssessmentChallengeKey" name="challangeId" readonly="readonly">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="originatingGroup" class="required col-md-4">Originating group:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="originatingGroup"
k-option-label="'Select'" ng-model-options="{updateOn: 'blur'}"
ng-model="challengesDTO.originatingGrpLkupCode"
k-data-source="challengeGroupOptions"
id="originatingGroup" required>
</select>
<p class="text-danger" ng-show="addChallengeForm.originatingGroup.$touched && addChallengeForm.originatingGroup.$error.required">Originating group is required</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="challangeCreatedBy" class="col-md-4">Challenge created by:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="challangeCreatedBy"
ng-model="challengesDTO.initByWorker" name="challangeCreatedBy">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="challangeDes" class="required col-md-4">Description of challenge:</label>
<div class="col-md-8">
<textarea rows="4" class="form-control"
name="challangeDes" id="challangeDes"
ng-model="challengesDTO.challengeDescription" required
placeholder="Description of challenge" ng-model-options="{updateOn: 'blur'}">
</textarea>
<p class="text-danger" ng-show="addChallengeForm.challangeDes.$touched && addChallengeForm.challangeDes.$error.required">Description of challenge is required</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
ng-model="challengesDTO.themesKyList" required
k-data-source="challengThemesDataSource"
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="ownerOrPreparer" class="col-md-4">RCSA Preparer
Responding to Challenge:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="ownerOrPreparer"
ng-model="challengesDTO.challengeResponseWrk"
name="ownerOrPreparer" readonly="readonly" >
</div>
</div>
</div>
<div class="row" ng-show="editMode">
<div class="form-group col-md-12">
<label for="responseComment" class="col-md-4">RCSA Preparer Response:</label>
<div class="col-md-8">
<textarea rows="4" class="form-control"
name="responseComment" id="responseComment"
ng-model="challengesDTO.challengeResponseComment"
placeholder="RCSA Owner/Preparer Response">
</textarea>
</div>
</div>
</div>
<div class="row" ng-show="editMode">
<div class="form-group col-md-12 fieldHeight">
<label for="outcomeResolution" class="col-md-4">Outcome/Resolution:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="outcomeResolution"
k-option-label="'Select'" ng-change="mandatoryEscalation()"
ng-model="challengesDTO.challengeDesLkupCode"
k-data-source="challengOutComeOptions"
id="outcomeResolution" >
</select>
</div>
</div>
</div>
<div class="row" ng-if="editMode && showEscalation" disable-control-point="CHALLENGES_EDIT">
<div class="form-group col-md-12 fieldHeight">
<label for="requireEscalation" class="required col-md-4">Did the challenge
require escalation to be resolved?:</label>
<div class="col-md-8">
<select kendo-drop-down-list k-data-text-field="'text'"
k-option-label="'Select'" k-data-value-field="'id'"
k-options="escalationDataSource" name="requireEscalation"
ng-model="challengesDTO.esclRqrFlag" required
id="requireEscalation" ng-model-options="{updateOn: 'blur'}"></select>
<p class="text-danger" ng-show="addChallengeForm.requireEscalation.$touched && addChallengeForm.requireEscalation.$error.required">Challenge escalation is required</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary pull-right" ng-disabled="addChallengeForm.$invalid" ng-click="submit()" require-control-point="CHALLENGES_ADD,CHALLENGES_EDIT">Save</button>
</div>
</form>
main.js
$scope.challengesDTO = {};
$scope.riskAssessmentDTO={
firstName: '',
lastName: '',
emailId: '' ,
nbkId: ''
};
$scope.$on('kendoRendered', function() {
rcsaAssessmentFactory.getThemeOptions().then(function(res){
$scope.challengThemesOptions.dataSource = new kendo.data.ObservableArray({data: res.data});
});
});
$scope.$on('addChallenge', function (s,id,opCheckList,checklistSessionKey){
$scope.addChallengeForm.originatingGroup.$setUntouched();
$scope.addChallengeForm.challangeDes.$setUntouched();
$scope.addChallengeForm.themesList.$setUntouched();
$scope.editMode = false;
$scope.clearFields = clearForm();
if($rootScope.user && $rootScope.user.customUserDetails){
$scope.challengesDTO.initByWorker= $rootScope.user.customUserDetails.workFullName;
}
rcsaAssessmentFactory.getAssessmentPreparerInfo(id).then(function(response){
$scope.riskAssessmentPreparer= response.data;
$scope.challengesDTO.challengeResponseWrkKey = $scope.riskAssessmentPreparer.rcsaPreparerWorkerKey;
$scope.challengesDTO.challengeResponseWrk = $scope.riskAssessmentPreparer.rcsaPreparerWorker;
});
$scope.riskAssessmentDTO.riskAssessmentKey = id;
$scope.challengesDTO.addChlngToChklst=opCheckList;
$scope.challengesDTO.riskAssessmentChecklistSessionKey=checklistSessionKey;
$scope.viewChallengeWin.open().center();
$scope.submit = function(){
rcsaAssessmentFactory.saveChallenge($scope.challengesDTO,id).then(function(){
$scope.viewChallengeWin.close();
$scope.$emit('refreshChallengeGrid');
$scope.addChallengeForm.$setPristine();
$scope.clearFields = clearForm();
});
};
});
var clearForm = function(){
$timeout(function () {
$scope.challengesDTO = {
themesKyList: null
};
});
$scope.challengeGroupOptions = kendoCustomDataSource.getDropDownDataSource('RA_ASES_CHLNG_GRP');
$scope.challengThemesDataSource = kendoCustomDataSource.getDropDownDataSource('RA_CHLNG_THEME');
$scope.challengOutComeOptions = kendoCustomDataSource.getDropDownDataSource('RA_CHLNG_OUTCOME');
$scope.riskAssessmentDTO={
firstName: '',
lastName: '',
emailId: '' ,
nbkId: ''
};
};
I hide a div in the second form and the third form if the first form is valid. The idea is that when you click on the submit button and if this is valid hide this element.
<div class="cover" ng-hide ="form.shipping.$valid"/>
I am not very clear yet how the logic works Angular these cases, if someone here can give me an idea would appreciate.
Example the my code:
(function() {
'use strict';
var checkOut = angular
.module('checkOutPageApp', [
'ngResource',
'ngAnimate',
'ngMessages'
]);
// Global controller
checkOut.controller('globalCtrl', function($scope, $locale) {
$scope.areaStatus = false;
$scope.disabled = function() {
if ($scope.shipping.$valid) {
return true;
} else {
return false
}
}
});
// Controller for form Shipping address
checkOut.controller('CheckoutShippingCtrl', ['$scope', '$http', '$location',
function($scope, $http, $location) {
this.data = {};
var self = this;
this.submit = function(valid) {
$scope.areaStatus = false;
if (!valid) {
return;
}
self.submitting = true;
$http.post('', self.data).then(function() {
self.data = [];
$location.path('/completed');
}, function(response) {
self.submitting = false;
});
};
}
]);
}(window, window.angular));
<div class="modifyAddressShipping" ng-controller="CheckoutShippingCtrl as form">
<form id="shipping" class="shipping" name="shipping" novalidate ng-submit="form.submit(shipping.$valid)" ng-class="{'loading': form.submitting, 'is-el-dirty' : shipping.$dirty || shipping.dirty}">
<fieldset class="billing reset-style">
<div id="shipping_address" class="group-items-form active">
<div class="row collapse">
<div class="row">
<!-- / .items-form -->
<div class="large-12 columns items-form">
<label>
<input class="field field-chk" type="text" name="name" placeholder="Name" ng-model="form.data.name" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.name.$touched" ng-messages="shipping.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button ng-click="areaStatus = !areaStatus" type="submit" class="chk-btn button-cta" data-ng-disabled="shipping.$invalid">
Next
</button>
</div>
</div>
</form>
</div>
<div class="delivery-payment-card-chk">
<form id="delivery_payment_form" novalidate name="formDelivery" class="min-h-3333" data-ng-submit="deliveryForm(formDelivery.$valid)">
<fieldset class="billing reset-style">
<div id="delivery_payment" class="group-items-form">
<div class="large-24 column items-form">
<label for="delivery1">
<input name="delivery" type="radio" id="delivery1" checked>2nd Class Delivery</label>
<label for="delivery2">
<input name="delivery" type="radio" id="delivery2">Click & Collect</label>
<label for="delivery3">
<input name="delivery" type="radio" id="delivery3">48 Hour</label>
<label for="delivery4">
<input name="delivery" type="radio" id="delivery4">Next Working Day</label>
<label for="delivery5">
<input name="delivery" type="radio" id="delivery5">Saturday Courier Delivery</label>
<!-- / label -->
</div>
<!-- / .items-form -->
</div>
</fieldset>
<div class="chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button class="chk-btn button-cta" data-ng-disabled="disabled">
Next
</button>
</div>
</div>
</form>
</div>
<div class="sd-delivery-payment-card-chk" ng-controller="CheckoutPaymentCtrl as form">
<form name="checkoutPayment" novalidate class="min-h-3333" ng-submit="form.submit(checkoutPayment.$valid)" ng-class="{loading:form.submitting}">
<fieldset class="sd-billing reset-style">
<div id="delivery_payment" class="sd-group-items-form">
<div class="large-24 columns items-form">
<label>
<input class="sd-field field-chk" type="text" ng-disabled="disabled" name="name" placeholder="Name" ng-model="form.data.name" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.name.$touched" ng-messages="checkoutPayment.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-24 columns items-form">
<label>
<input type="text" id="card_number" name="cardnumber" card-data-type autocomplete="off" size="19" ng-minlength="15" maxlength="19" nd-disabled="" class="sd-field" placeholder="XXXX XXXX XXXX XXXX" ng-class="(form.data.cardnumber | checkcreditcard)" ng-model="form.data.cardnumber"
required>
<small class="checkCard" ng-class="(form.data.cardnumber | checkcreditcard)"></small>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cardnumber.$touched" ng-messages="checkoutPayment.cardnumber.$error">
<p class="text-msg" ng-message="required">You did not enter your card number</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-6 columns items-form">
<label>
<input id="expiry_date" maxlength="5" name="datacard" card-data-expiration ng-disabled="" class="sd-field txt-center p-l-0" ng-model="form.data.datacard" type="text" type placeholder="MM / YY" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.datacard.$touched" ng-messages="checkoutPayment.datacard.$error">
<p class="text-msg" ng-message="required">Not valid date credit card</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-5 columns items-form">
<label>
<input name="cvv" class="sd-field txt-center p-l-0" ng-disabled="disabled" maxlength="4" ng-minlength="3" type="text" ng-pattern="/^[0-9]+$/" placeholder="CVV" ng-model="form.data.cvv" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cvv.$touched" ng-messages="checkoutPayment.cvv.$error">
<p class="text-msg" ng-message="required">Security code required</p>
</div>
<div class="error" ng-show="checkoutPayment.cvv.$error.pattern">
<p class="text-msg">Security code must contain only numbers</p>
</div>
<div class="error" ng-show="checkoutPayment.cvv.$error.minlength">
<p class="text-msg">Security code must be 3-4 digits</p>
</div>
</div>
<!-- / .sd-items-form -->
</div>
</div>
</fieldset>
<div class="sd-chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button type="submit" class="sd-chk-btn button-cta" ng-disabled="!checkoutPayment.$invalid">
Place order
</button>
</div>
</div>
</form>
</div>
The following hides a form when the submit button has been pressed ONLY IF the form submitted is $valid. To work between controllers I created a variable on $rootScope to flag if the form is valid or invalid. It may be more correct to use a getter and setter function and store the variable in a service.
INDEX.HTML
<!DOCTYPE html>
<html lang="en" ng-app="msgApp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="MainCtrl">
<div ng-show="form1Done" ng-hide="!form1Done">
<h2>The Form has not disappeared</h2>
</div>
<div ng-show="!form1Done" ng-hide="form1Done">
<h2>The Form</h2>
<form name="userForm">
<div class="field">
<label for="userName">Enter your userName:</label>
<input type="text" name="userName" ng-model="data.userName"
ng-minlength="5" ng-maxlength="30" required />
<div ng-messages="userForm.userName.$error" ng-messages-multiple>
<!-- the required message -->
<div ng-message="required">Please enter username</div>
<div ng-message="minlength">Username is too short</div>
<div ng-message="maxlength">Username is too long</div>
<div ng-message="userName">Error with username</div>
</div>
</div>
<button type="submit" ng-click="clickBtn(userForm.$valid)">Submit</button>
</form>
</div>
<script src="http://code.angularjs.org/1.3.6/angular.js"></script>
<script src="http://code.angularjs.org/1.3.6/angular-messages.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
APP.JS
angular.module('msgApp', ['ngMessages', 'msgApp.controllers'])
.run(function($rootScope) {
$rootScope.form1Done = false;
});
CONTROLLERS.JS
angular.module('msgApp.controllers', [] )
.controller('MainCtrl', function($scope, $rootScope) {
$scope.clickBtn = function(form) {
//valid form
if(form == true) {
console.log("Form is valid, $rootScope.form1Done= "+$rootScope.form1Done);
$rootScope.form1Done = true;
}
//invalid form
if(form == false) {
$rootScope.form1Done = false;
console.log("Form is invalid, $rootScope.form1Done= "+$rootScope.form1Done);
}
}
});
Maybe I'm using model binder incorrectly or maybe marionette interferes, but my view and model don't seem to be communicating and therefore not pre-filling my template fields
View
define([
'marionette',
'underscore',
'text!app/views/templates/user/form.html',
'app/models/user'
],
function (Marionette, _, Template, Model) {
"use strict"
return Marionette.ItemView.extend({
events: {
'submit .edit-user-form': 'onClickSave'
},
initialize: function(options) {
/* initiate model binder */
Backbone.ModelBinder.bind(Model, this.$el)
/* create empty model in case its a create request */
this.model = new Model()
/* if the options.id is passed then lets load an instance of the model */
if (options && options.id) {
this.model = new Model({id: options.id})
this.model.set('id', options.id)
/* set that to this so its acceptable inside the fetch */
var that = this
this.model.fetch({
/* fetch request successful */
success: function (response) {
/* set the model instance trigger a re-render */
that.model = response
that.render()
},
/* we couldn't load the model so we go back to the users list */
error: function () {
alert('User could not be loaded, redirecting you to the users list')
window.location.hash = 'users'
}
})
}
},
/* save button triggered so prevent default and trigger the model to save */
onClickSave: function (ev) {
ev.preventDefault()
this.model.save({}, {
success: function (response) {
console.log(response, 'response')
}
})
},
/* render the form */
render: function () {
var html = _.template($(Template).html(), this.model.toJSON())
this.$el.html(html)
return this
}
})
}
)
Template
<script type="text/template" id="userFormTemplate">
<div id="userForm">
<h2><img src="/img/icons/32/update.png" /> Update User</h2>
<h2><img src="/img/icons/32/create.png" /> Create New User</h2>
<form class="edit-user-form">
<fieldset name="personal" class="halfWidth left">
<legend>Personal Details:</legend>
<div class="control-group">
<label class="control-label">First name:</label>
<div class="controls">
<input type="text" name="first_name" id="first_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Last name:</label>
<div class="controls">
<input type="text" name="last_name" id="last_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Birthdate:</label>
<div class="controls">
<input type="date" name="birthdate" id="birthdate">
</div>
</div>
</fieldset>
<fieldset name="job" class="halfWidth right">
<legend>Job Details:</legend>
<div class="control-group">
<label class="control-label">Job Title</label>
<div class="controls">
<input type="text" name="job_title" id="job_title">
</div>
</div>
<div class="control-group">
<label class="control-label">Start Date:</label>
<div class="controls">
<input type="date" name="job_start_date" id="job_start_date">
</div>
</div>
<div class="control-group">
<label class="control-label">Probation Ends:</label>
<div class="controls">
<input type="date" name="job_probation_ends" id="job_probation_ends">
</div>
</div>
</fieldset>
<div class="clearfix"></div>
<br />
<fieldset name="personal" class="halfWidth left">
<legend>Work Details:</legend>
<div class="control-group">
<label class="control-label">Work Email</label>
<div class="controls">
<input type="email" name="work_email" id="work_email">
</div>
</div>
<div class="control-group">
<label class="control-label">Work Address:</label>
<div class="controls">
<input type="text" name="work_address" id="work_address">
</div>
</div>
<div class="control-group">
<label class="control-label">Work Phone Number:</label>
<div class="controls">
<input type="text" name="work_phone_number" id="work_phone_number">
</div>
</div>
</fieldset>
<fieldset name="personal" class="halfWidth right">
<legend>Personal Details:</legend>
<div class="control-group">
<label class="control-label">Personal Email</label>
<div class="controls">
<input type="email" name="personal_email" id="personal_email">
</div>
</div>
<div class="control-group">
<label class="control-label">Home Address:</label>
<div class="controls">
<input type="text" name="personal_address" id="personal_address">
</div>
</div>
<div class="control-group">
<label class="control-label">Home Phone Number:</label>
<div class="controls">
<input type="text" name="personal_phone_number" id="personal_phone_number">
</div>
</div>
</fieldset>
<div class="clearfix"></div>
<br />
<div class="control-group button">
<button class="btn save-form btn-success" type="submit">Create User</button>
</div>
</form>
</div>
</script>
You have to define the bindings, its not automatic.
var bindings = {
first_name: '#first_name',
last_name: '#last_name',
birthdate: '#birthdate',
job_title: '#job_title',
job_start_date: '#job_start_date',
job_probation_ends: '#job_probation_ends',
work_email: '#work_email',
work_address: '#work_address',
work_phone_number: '#work_phone_number',
personal_email: '#personal_email',
personal_address: '#personal_address',
personal_phone_number: '#personal_phone_number'
}