I want to hide a raw-input - angularjs

I try to hide a row-input using ng-show but doesn't work. The field works in cascade with form.purchase:
- The field is visible if form.achat = R (Renewal)
- The field is empty and masked if form.buy = N (New)
this is my html code:
<div class="form-group mode-update col-md-10 no-padding">
<label class="col-md-4 control-label font-normal"> {{
'field.investissement.nouveauRenouvellement' | translate }} </label>
<div class="col-md-8">
<div class="form-group mode-update col-md-12
no-padding">
<div class="radio-inline">
<label for="achatBudgetTrue">
<input ng-
disabled="disabledField" ng-checked="true" type="radio" ng-true-
value="A" ng-false-value="B" name="achatBudget" value="N" ng-
model="entity.achatBudget" id="achatBudgetTrue"{{
'field.investissement.achatBudget.nouveau' | translate }}
</label>
</div>
<div class="radio-inline">
<label for="achatBudgetFalse">
<input ng-change="operations.changeEntityField"
ng-disabled="disabledField" type="radio" name="achatBudget" value="R"
ng-model="entity.achatBudget" id="achatBudgetFalse">
{{
'field.investissement.achatBudget.renouvellement' | translate }}
</label>
</div>
</div>
</div>
</div>
<raw-input
property="field"
vertical="true"
ng-repeat="field in fields | updateParams:metadata |
filter : { fieldSet : 'fieldset.investissement.descriptif'} | filter : {
name : 'parcAncienBudget' }"
entity="entity"
on-update="operations.updateEntityField"
on-change="operations.changeEntityField"
metadata="metadata"
ng-show="entity.achatBudget =='R'"
mode="update"
ng-show = "false"
creating="creating"
style="{inputSize: 'col-md-10 no-padding'}">
</raw-input>

You have two times an ng-show-attribute in your attributes:
<raw-input
...
ng-show="entity.achatBudget =='R'"
...
ng-show = "false"
The value of the second overrides the value of the first, so the element is never shown, no matter what value entity.achatBudget has.

I add a function in js:
$scope.isBudgetAchatVisible = false;
$scope.ShowParc= function(value) {
$scope.isBudgetAchatVisible = (value == "R") ? true : false;
}
and in the view:
<div class="radio-inline">
<input ng-checked="true" ng-change="ShowParc('N')" ............... >
</div>
<input ng-change="ShowParc('R')".....................>
</div>
<raw-input
ng-if="isBudgetAchatVisible
..............
</raw-input>

Related

Checkbox doesn't enable fields Knockout

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.

Pass array just what user selects

I want to pass data what user checked. My problem now.. it pass all..
This is my demo code and stackblitz
HTML
<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}" disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read" name="access_{{modules[i].company_id}}" id="package-1">
<label for="package-1">Read</label>
</div>
<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write" (change)="modules[i].action.write" class="form-control" name="access_{{modules[i].company_id}}" id="package-2">
<label for="package-2">write</label>
</div>
<button (click)="test(item)">test</button>
</div>
Component
test(val){
console.log(val)
}
There are two issues mainly:
You need to create a unique id for both label and id attributes within the for-loop.
Next, create a method that will toggle the read/write property of each individual module. This ensures that if read is set then write will be false and vice versa.
.ts
toggleReadWrite(module: any, isRead: boolean) {
if (isRead) {
module.action.read = !module.action.read;
module.action.write = false;
} else {
module.action.write = !module.action.write;
module.action.read = false;
}
}
.html
<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name"
value="{{modules[i].module_name}}" disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read"
(change)="toggleReadWrite(modules[i], true)"
name="access_{{modules[i].company_id}}" id="package+1+{{i}}">
<label for="package+1+{{i}}">Read</label>
</div>
<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write"
(change)="toggleReadWrite(modules[i], false)" class="form-control"
name="access_{{modules[i].company_id}}" id="package+2+{{i}}">
<label for="package+2+{{i}}">write</label>
</div>
<button (click)="test(item)">test</button>
</div>
First of all, you should make the id of radio buttons unique as you are looping through it.
id="package-1{{i}}"
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read" name="access_{{modules[i].company_id}}"
id="package-1{{i}}">
<label for="package-1{{i}}">Read</label>
Also, I am not sure what is your desired output, please explain more.

Dynamically check checkboxes for ng-show

I know how to do this with ng-repeat.
But I can't find a solution for this way.
I have 6 checkboxes, and when I check any of them they show (ng-show) one of 6 charts.
The problem is my backend sends me array for pre-checked checkboxes in this way with API.
graphs_config:"["graph.batteryVoltage","graph.internetUserCount","graph.usbAndWirelessCharging"]"
I get this with $promise and check if there is data for pre-checked charts
$scope.charts= userChartsFactory.get({ user: user_id });
$scope.charts.$promise.then(function(data) {
if (data.graphs_config.indexOf("graph.batteryVoltage") >= 0) {
$scope.graphBatteryVoltage = true;
}
if (data.graphs_config.indexOf("graph.internetUserCount") >= 0) {
$scope.graphInternetUserCount = true;
}
if (data.graphs_config.indexOf("graph.usbAndWirelessCharging") >= 0) {
$scope.graphUsbAndWirelessCharging = true;
}
});
And in HTML I make this
<div class="checkbox-inline">
<input type="checkbox" class="checkboxShowGraph" id="graph.batteryVoltage" value="battery_voltage" checklist-model="graph.graphBatteryVoltage" ng-checked="graph.graphBatteryVoltage" ng-model="graph.batteryVoltage" ng-change="addRemoveUserChart(graph.batteryVoltage, 'graph.batteryVoltage')"><label for="graph.batteryVoltage">{{'BATTERY_VOLTAGE' | translate}}</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="checkboxShowGraph" id="graph.internetUserCount" value="internet_user_count" checklist-model="graph.graphInternetUserCount" ng-checked="graph.graphInternetUserCount" ng-model="graph.internetUserCount" ng-change="addRemoveUserChart(graph.internetUserCount, 'graph.internetUserCount')"><label for="graph.internetUserCount">{{'INTERNET_USER_COUNT' | translate}}</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="checkboxShowGraph" id="graph.usbAndWirelessCharging" value="usb_and_wireless_charging" checklist-model="graph.usbAndWirelessCharging" ng-model="graph.usbAndWirelessCharging" ng-change="addRemoveUserChart(graph.usbAndWirelessCharging, 'graph.usbAndWirelessCharging')"><label for="graph.usbAndWirelessCharging">{{'CHARGING_COUNTER' | translate}}</label>
</div>
I check if value is true or false and with ng-checked I try to CHECK checkboxes in HTML but this not working, because checkboxes are not pre-checked in this way.
You can refer this working code.
Here Controller Code
$scope.data={
FirstCheckbox:true,
SecondCheckbox: false
}
Here is HTML
<label class="">
<li class="item item-checkbox checkbox-dark " >
Test1
<label class="checkbox" >
<input type="checkbox" ng-model="data.FirstCheckbox" >
</label>
</li>
</label>
<label class="">
<li class="item item-checkbox checkbox-dark " >
Test2
<label class="checkbox" >
<input type="checkbox" ng-model="data.SecondCheckbox" >
</label>
</li>
</label>

Select multiple radio options in angularjs issue

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}}'

Array of elements is not working correctly

I have the following mongoose schema
var MySchema = new Schema({
field1: [{
format: {
type: String,
required: true
},
value: {
type: String,
required: true
}
}],
field2: [{
format: {
type: String,
required: true
},
value: {
type: String,
required: true
}
}]
});
To get the input for this model I am creating a form which has the array of controls and the code is below
Even If if try to use the $scope.field1[<index>] it give the error that
TypeError: Cannot read property 'field1' of undefined
<div class="form-group">
<div class="col-md-12 padding-left-0">
<label for="question">Field1 Values</label>
</div>
<div class="col-md-12" ng-repeat="(optionKey, optionValue) in [0,1]">
<ng-form name="field1Form{{optionKey}}">
<div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_format.$invalid }">
<label for="field1_format">Type</label>
<select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[$index].format" required>
<option value="text" selected="selected">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field1Form{{optionKey}}.field1_format.$invalid" class="help-block">
<p ng-show="field1Form{{optionKey}}.field1_format.$error.required">Field1 type is required</p>
</div>
</div>
<div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_value.$invalid }">
<div class="col-md-12">
<label for="field1_value">Value</label>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[$index].value" placeholder="Enter field1 value" required/>
<div ng-show="submitted && field1Form{{optionKey}}.field1_value.$invalid" class="help-block">
<p ng-show="field1Form{{optionKey}}.field1_value.$error.required">Field1 value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
<div class="form-group col-md-12 padding-left-0" data-ng-show="true">
<div class="col-md-12 padding-left-0"><label>Field2 Values</label></div>
<div class="col-md-6" data-ng-repeat="i in [0,1]">
<ng-form name="field2Form{{i}}">
<label>Value-{{i+1}}</label>
<div class="col-md-12">
<div class="col-md-4" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_format.$invalid }">
<label for="field2_format">Type</label>
<select class="form-control" name="field2_format" id="field2_format" data-ng-model="form.field2[$index].format" required>
<option value="text">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field2Form{{i}}.field2_format.$invalid" class="help-block">
<p ng-show="field2Form{{i}}.field2_format.$error.required">Field2 type is required</p>
</div>
</div>
<div class="col-md-7" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_value.$invalid }">
<label for="field2_value">Value</label>
<input type="text" class="form-control" name="field2_value" id="field2_value" data-ng-model="form.field2[$index].value" placeholder="Enter Value {{i+1}}" required/>
<div ng-show="submitted && field2Form{{i}}.field2_value.$invalid" class="help-block">
<p ng-show="field2Form{{i}}.field2_value.$error.required">Field2 value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
But in the angular controller I am getting the array of object values for field2 but field1 is not coming (missing) from the form data.
But when I hard code the question array like below for field1 then field1 also work fine
<div class="form-group">
<div class="col-md-12">
<ng-form name="field1Form0">
<div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form0.field1_format.$invalid }">
<label for="field1_format">Type</label>
<select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[0].format" required>
<option value="text">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field1Form0.field1_format.$invalid" class="help-block">
<p ng-show="field1Form0.field1_format.$error.required">Field1 type is required</p>
</div>
</div>
<div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form0.field1_value.$invalid }">
<div class="col-md-12">
<label for="field1_value">Value</label>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[0].value" placeholder="Enter field1" required/>
<div ng-show="submitted && field1Form0.field1_value.$invalid" class="help-block">
<p ng-show="field1Form0.field1_value.$error.required">Question value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
Can anyone help me in this?
It seems like some angular issue.
It has been fixed by declaring the variable in angular Controller like below
$scope.form = {};
$scope.form.field1 = {};
Now its working fine. May be the issue in auto declaring the nested objects or array in angular.
It very possible you've got a lot of things mixed up.
One of them you have already recognised - the scope didn't have a form property.
The expression field1Form{{optionKey}}.field1_format.$invalid is not valid, because string interpolation cannot be used in the context where it's found. As far as I know, ng-class and ng-show directives expect a JavaScript expression, not a template. My point is this clearly, the interpolation expression {{optionKey}}, should not be used in ng-class and ng-show directives.

Resources