Trying to figure out form related angular technique. Im new to angularjs and started digging deep into it.
Well im trying to get current and permanent address in a form. When the "same as current" checkbox is checked then value of current address field is written in permanent address field ng-value.
While permanent address field is typed first and then we checked "same as current" not overwriting field from current address ng-value.
Current Address field
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="current_address_line1" ng-model="contacts.current_address_line1" placeholder="House Number">
checkbox :
<input type="checkbox" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
Permenent Address :
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" ng-value="contacts.current_address_line1" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" ng-if="!sameascurrent" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Any help would be appreciated.
http://plnkr.co/edit/rX3iT5lX2JEIArvxL8SK?p=preview
Move overwriting logic to controller. For permanent address use similar inputs as for current (no ng-value only ng-model) plus ng-disabled.
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line2" ng-model="contacts.permenent_address_line2" ng-disabled="sameascurrent" placeholder="Street Name">
Add ng-change to checkbox input:
<input type="checkbox" ng-change="change()" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
and function called when checkbox is changed in controller. This function overwrites model of permanent address if sameascurrent is true.
$scope.change = function () {
if ($scope.sameascurrent) {
$scope.contacts.permenent_address_line1 = $scope.contacts.current_address_line1;
$scope.contacts.permenent_address_line2 = $scope.contacts.current_address_line2;
}
}
See http://plnkr.co/edit/aEuG62gaUh5U4Xl5ZUTv?p=preview
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" !!ng-value="contacts.current_address_line1"!! name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Remove ng-value from input. Ng-value is used to set values like objects to the radio box or smth like this.
UPD: Just remember. When you are using ng-model, this means that value from input will be dynamicly set to the your model. So you can bind it from model to anywhere you wont
ng-value just set the filed once, for realtime data clone,you can write your own $watch method inside the controller:
function sync(){
if($scope.sameascurrent){
var contacts = $scope.contacts;
contacts.permenent_address_line1 = contacts.current_address_line1;
contacts.permenent_address_line2 = contacts.current_address_line2;
}
}
$scope.$watch('contacts',sync,true);
$scope.$watch('sameascurrent',sync);
http://plnkr.co/edit/EPoprBLeNxlwDlklWuiC?p=preview
For more detail on $watch, you can refer angular docs for $scope
Related
I have a method that is toggling between two inputs.
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
}
<a ng-click="$ctrl.toggleModToLod(configurableOption)" ng-init="">MOD or LOD</a>
<input ng-if="configurableOption.isModField" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="!configurableOption.isModField" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
It works fine, but if i had before filled the MOD field and after that i changed to LOD field the request contain both values, is there any way to have in my request only the selected value from the selected input ?
You can make the switch a toggle or checkbox or other form element
<label><input type='radio' ng-model="value.which" value='MOD' /> MOD</label>
<label><input type='radio' ng-model="value.which" value='LOD' /> LOD</label>
<input ng-if="value.which=='MOD'" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="value.which=='LOD'" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
Then when you send your request, you'll have the which variable which will tell you which value to use. Additionally, you'll have a built in switcher that will automatically work by setting value.which
just clear both values from model everytime you toggle:
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
$scope.value.mod = undefined; // however you're setting these on the controller / directive
$scope.value.lod = undefined;
}
I am using angular 2 forms in my application and i have created the input based on my model. I have binded my input field with ngmodel and now I want to do a dirty check on this input field. So i have added input with # variable. Here is my code:-
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}" class="form-control" name="query3" id="query3" [(ngModel)]="sampledetails.rules[0].query3" #query3="ngModel">
But I am getting an error something like:-
There is no directive with "exportAs" set to "ngModel" ("="form-control" name="query3" id="query3" [(ngModel)]="sampledetails.rules[0].query3" [ERROR ->]#query3="ngModel">
Can anybody help me here..
You dont need to use #query3="ngModel" for angular.js 2,
so change
from
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}"
class="form-control" name="query3" id="query3"
[(ngModel)]="sampledetails.rules[0].query3" #query3="ngModel">
to (this will work)
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}"
class="form-control" name="query3" id="query3"
[(ngModel)]="sampledetails.rules[0].query3" >
I tried to set up data-minute-step={{somevalue}} but if I change the value, it doesn't update the picker. Can I do something about it?
Example:
<input type="number" ng-model="stepSize">
<input bs-timepicker data-minute-step="{{stepSize}}">
This is what I have:
<input id="timetable.amountPerLeson"
class="form-control"
type="number"
step="15"
placeholder="45 min"
ng-model="durationStep">
<input id="timetable.start"
class="form-control"
type="text"
placeholder="date"
ng-model="slot.startHour"
bs-timepicker
data-time-format="HH:mm"
data-length="1"
data-minute-step="{{durationStep}}"
data-arrow-behavior="picker"
ng-show="slot.name === 'Hours'" >
I took a look on the source code and it doesn't seem to watch changes on the attributes - They are evaluated only once, so that's why chaning the data-minute-step via input doens't work.
The workaround I can suggest is to force rendering the timepicker element, when you update the minutes steps:
<input id="timetable.amountPerLeson" class="form-control" type="number" step="15" placeholder="45 min"
ng-model="durationStep" ng-change="minutesUpdated()">
<input id="timetable.start" class="form-control" type="text" placeholder="date"
ng-model="slot.startHour"
bs-timepicker data-time-format="HH:mm" data-length="1" ng-attr-data-minute-step="{{durationStep}}"
data-arrow-behavior="picker" ng-show="slot.name === 'Hours'" ng-if="!renderTimePicker">
Add the render function to the controller (Make sure you inject $timeout):
$scope.minutesUpdated = function() {
$scope.renderTimePicker = true;
$timeout(function() {
$scope.renderTimePicker = false;
});
};
Changing the minutes step from the view will trigger the $scope.minutesUpdated() function, it will remove the timepicker from the view (Because I added ng-if="!renderTimePicker" to the element), and bring it back again after the view has rendered (By resetting $scope.renderTimePicker = false; inside the $timeout).
Please note that I changed the data-minute-step to ng-attr-data-minute-step because I think it will make it work.
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>
I have a PresentationsController which handles some POST action form. In this form I have data related to Presentation such as:
<input name="data[Presentation][title]" class="init-focus span4" type="text" id="PresentationTitle" required="required">
and those fields are handled correctly by controller. But PresentationModel hasMany Subject. So I want to include some presentation subjects in form. I did it like this:
<input name="data[Subject][0][subject]" disabled="disabled" class="subject" maxlength="255" type="text" id="Subject0Subject" required="required">
<input name="data[Subject][1][subject]" disabled="disabled" class="subject" maxlength="255" type="text" id="Subject0Subject" required="required">
But those data are not handled by Cake - I tried var_dump($this->request->data) in Controller but they are missing... for some reason Cake just ignores those data...
I am generating inputs dynamicalyy with jquery but it inputs are added correctly to form - I can see them in my browser html elements viewer:
<input name="data[Subject][0][subject]" maxlength="255" type="text" id="Subject0Subject" required="required">
<input name="data[Subject][1][subject]" disabled="disabled" class="subject" maxlength="255" type="text" id="Subject0Subject" required="required">
The above is what I view in html elements viewer - the first input is added "inline" from php and second is added dynamically with jquery. And only the first one is visible after POST.
When you set an input to disabled="disabled" it is NOT submitted. That goes for normal HTML and is not something CakePHP specific.
According to W3Schools.com:
Disabled elements in a form will not be submitted.