We Keep Coding

Angular 4 Nested FormArrays Cannot read property 'push' of null

I cannot push to an array.
i have a segment(id, time) that can have one or several people (role, infos). the field are generated dynamically. On load the page shows the fields (see image below).
when try to add a person I get error : ERROR TypeError: Cannot read property 'push' of null
Here is the .ts code:
addPerson(index: number) {
//let personRows3 = <FormArray>this.mySummaryForm.get('personRows3');
let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`)
personRows3.push(this.fb.group({
personR3: '',
personI3: ''
}));
}
segmentRows3: this.fb.array([
this.fb.group({
segmentId3: '',
segmentTime3: '',
personRows3: this.fb.array([
this.fb.group({
personR3: '',
personI3: ''
})
])
})
]),
The .html code
<div formArrayName="segmentRows3">
<div *ngFor=" let segmentRow of mySummaryForm.controls.segmentRows3.controls; let i=index " >
<div class="form-group" [formGroupName]="i" > {{i+1}}
<label for="segmentId3">Segment ID
<select formControlName="segmentId3" formControlName="segmentId3" placeholder="pick" type="text" id="segmentId3" class="form-control" [(ngModel)]="levelNumSegment3" (ngModelChange)="toNumberSegment3()">
<option *ngFor="let level of segmentId" [value]="level.num">{{level.name}}</option>
</select>
</label>
<label for="segmentTime3">Segment time
<input formControlName="segmentTime3" type="text" id="segmentTime3" class="form-control" placeholder="select a time" (ngModelChange)="onChange($event)">
</label>
<div formArrayName="personRows3">
<div *ngFor=" let personRow of segmentRow.controls.personRows3.controls; let j=index " >
<div class="form-group" [formGroupName]="j" > {{j+1}}
<label for="personR3">person Role
<input formControlName="personR3" [typeahead]="personRole" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personR3" class="form-control" placeholder="select a role" (ngModelChange)="onChange($event)" >
</label>
<label for="personI">Person infos
<input formControlName="personI3" [typeahead]="states" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personI3" class="form-control" placeholder="select infos" (ngModelChange)="onChange($event)" >
</label>
<label><span (click)="deletePerson(j)" class="btn btn-danger">Remove</span></label>
</div>
</div>
</div>
<br><button type="button" (click)="addPerson(j)" class="btn btn-info">Add a person</button><br><br><br>
</div>
</div>
</div>

The above error will occur when your personRows3 is null or don't have elements.
Add a check before pushing the elements,
if(personRows3){
personRows3.push(this.fb.group({
personR3: '',
personI3: ''
}));
}

AngularJS - Conditionally hide a span

I want to hide the <span ng-show="currencyObject.to != 'undefined'">=</span> until the currencyObject.to is undefined which is supposed to be undefined until the user select an option from the select box.
I used ng-show="currencyObject.to != 'undefined'" to conditionally show-hide the span but it is not working. What I find is, when the page is freshly loaded, the = is visible.
<div class="row" ng-controller="QConvertController">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" step="any" class="form-control" id="amount" ng-model="currencyObject.amount">
</div>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="from">From</label>
<select class="form-control" id="from" ng-model="currencyObject.from" ng-change="getconvertedrate()">
<option ng-repeat="currencyCode in currencyCodes" value="{{currencyCode.value}}">{{currencyCode.display}}</option>
</select>
</div>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="to">To</label>
<select class="form-control" id="to" ng-model="currencyObject.to" ng-change="getconvertedrate()">
<option ng-repeat="currencyCode in currencyCodes" value="{{currencyCode.value}}">{{currencyCode.display}}</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="col-md-8 col-md-offset-2">
<h1 class="display-4">{{currencyObject.amount}} {{currencyObject.from}} <span ng-show="currencyObject.to != 'undefined'">=</span> {{currencyObject.amount_converted}} {{currencyObject.to}}</h1>
</div>
</div>
QConvertController.js
var app = angular.module('qconvertctrlmodule', [])
.controller('QConvertController', function($scope, $http, $log) {
$scope.currencyObject = {};
$scope.currencyObject.from;
$scope.currencyObject.to;
$scope.currencyObject.amount;
$scope.currencyObject.amount_converted;
$scope.currencyObject.runCount = 0;
$scope.currencyCodes = [{value : 'INR', display : 'Indian Rupee'}, {value : 'USD', display : 'US Dollar'}, {value : 'GBP', display : 'British Pound'}];
$scope.getconvertedrate = function() {
$log.info("FROM : " + $scope.currencyObject.from);
$log.info("TO : " + $scope.currencyObject.to);
$http.get("http://api.decoded.cf/currency.php", {params : {from : $scope.currencyObject.from,
to : $scope.currencyObject.to, amount : $scope.currencyObject.amount}})
.then(function(response) {
$scope.currencyObject.amount_converted = response.data.amount_converted;
$log.info(response.data.amount_converted);
});
};
});

You don't need != 'undefined' to check the variable is defined or not
<span ng-show="currencyObject.to">=</span>
or
<span ng-hide="!currencyObject.to">=</span>
or
<span ng-if="currencyObject.to">=</span>

You can directly use as ng-show="currencyObject.to"
Also in Js correct usage of comparing with undefined is
if(typeof variable !== 'undefined'){ /*...*/ }

Need to restrict clone max10 in mobile device using jquery

Working on Jquery clone where in large device like desktop and tablet user can clone more but in mobile I have to restrict user to clone 10. Is this possible to restrict user to clone
Here is the jquery code
var i = 1;
$(document).on("click", ".btn_more", function () {
$(".cloned-row:first").clone().insertAfter(".cloned-row:last").attr({
'id': function(_, id) {
return id + i
},
'name': function(_, name) {
return name + i
},
'class': "add_pn_grp"
//'value': ''
}).end().find('[id]').attr({
'id': function(_, id) {
return id + i
}
});
if(i < $('.cloned-row1').length){
$(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
}
i++;
});
$(document).on('click', ".btn_less", function () {
$(this).closest(".cloned-row").remove();
});
Here is the html code
<div id ="phone_div" class="col-xs-12 col-sm-9 col-md-9 col-lg-9 ">
<!--Phone information Help pop up-->
<div class="modal-dialog" role="document" id="phonehint" align="center">
<div class="modal-content">
<div class="modal-header text-center" >
<h4 id="myModalLabel" class="modal-title" style="color:black;">Help - Phone</h4>
</div>
<div class="modal-body" >
<h5 style="color:black;" align="left"> Provide number <br/>Provide your phone number along with the country code.</h5>
</div>
</div>
</div>
<!--Contact information Help pop up Ends-->
<label>Phone</label> <i class="fa fa-question-circle help_icon" onclick="showphonehint()" onmouseout="hidephonehint()"></i>
<div class="em_pho cloned-row">
<select id="sel_phntype" name="sel_phntype" class="sslt_Field">
<option selected='selected' value="">Phone Type</option>
<option value="BUSN">Business</option>
<option value="CAMP">Campus</option>
<option value="CELL" >Cellphone</option>
<option value="CEL2">Cellphone2</option>
<option value="FAX">FAX</option>
<option value="HOME">Home</option>
<option value="OTR">Other</option>
</select>
<span class = "ph-inline">
<input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" />
<input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
<input type="radio" name="preferred" id="rad_Prf" value="preferred">
<label class="radio-label">Preferred</label>
<!--<button class="btn_more" id="buttonvalue"></button>-->
<input type="button" class="btn_more" id="buttonvalue"/>
</span>
</div>
</div>
I have created variable count I have assigned the count as 10 but how to restrict in mobile I am confused like anything.
Kindly help me
Thanks in advance
Mahadevan

you could prevent execution in those cases, isMobile and size > 9, using a relatively effective one-liner.
edit
as suggested in another post on the topic, you could check for mobile with matchMedia.
$(document).ready(function() {
$(".btn_add").click(function() {
if ( $('.cloned_row').size() > 9 && isMobile() ) return;
// cloning logic
});
});
function isMobile() { return window.matchMedia("only screen and (max-width: 760px)").matches; }

Prevent validation of hidden fields in angularJS/ionic

I have this form and I have used ng-hide to hide some fields when meeting certain requirements. I have used validation for all the fields ( When a field is kept empty, it'll validate and ask to be fill the field). The problem is when my fields get hidden, still it seems to be validating. So I cannot proceed my form. How can I solve this problem?
I've used ng-required to the fields I've hidden and set it to false when that field is not needed, but it does not seem to work.
This is part of the form that I'm referring to:
<div class="form-group" ng-class="{ 'has-error' :submitted && (myForm.scheduler.$pristine || myForm.scheduler.$invalid)}">
<label class="labelColor"><h5><b>Payment Type *</b></h5></label>
<select type="select" class="textbox-n" id="scheduler" ng-model="data.scheduler" ng-change="scheduleChange()" ng-options="Scheduler.name for Scheduler in SchedulersArr" name="scheduler" required>
<option id="default" value="" selected="selected">--Select--</option></select>
<span class="help-inline" ng-show="submitted && (myForm.scheduler.$pristine || myForm.scheduler.$invalid)" >A Payment Type is required.</span>
</div>
<!-- Effective Date:-->
<div ng-hide = "hideFutureDate">
<div class="form-group" ng-class="{ 'has-error' : myForm.effectiveDate.$invalid && myForm.effectiveDate.$dirty && submitted || (myForm.effectiveDate.$invalid && myForm.effectiveDate.$pristine) && submitted }">
<label class="labelColor" ><h5><b>Effective Date*</b></h5></label><br>
<input style="width:100%" class="item-input-wrapper" type="date" id="effectiveDate" name="effectiveDate" ng-model="data.effectiveDate"
placeholder="Effective Date" ng-required="!hideFutureDate" />
<span class="help-inline" ng-show="submitted && myForm.startDate.$error.required" >A Effective date is required.</span>
<font color="red" >{{dateValidation}}</font>
</div>
</div>
<!--From/To Dates -->
<div ng-hide = "hideRecurrent" >
<div class="row" style="padding-left:15px">
<div class="form-group" ng-class="{ 'has-error' : myForm.startDate.$invalid && myForm.startDate.$dirty && submitted || (myForm.startDate.$invalid && myForm.startDate.$pristine) && submitted }">
<label class="labelColor" ><h5><b>From Date*</b></h5></label><br>
<input style="width:100%" class="item-input-wrapper" type="date" id="startDate" name="startDate" ng-model="data.startDate"
placeholder="From Date" ng-required="!hideRecurrent" />
<span class="help-inline" ng-show="submitted && myForm.startDate.$error.required" >A Start date is required.</span>
<font color="red" >{{dateValidation}}</font>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.toDate.$invalid && myForm.toDate.$dirty && submitted || (myForm.toDate.$invalid && myForm.toDate.$pristine) && submitted }">
<label class="labelColor" ><h5><b>To Date*</b></h5></label><br>
<input style="width:100%" class="item-input-wrapper" type="date" id="toDate" name="toDate" ng-model="data.toDate"
placeholder="To Date" ng-required="!hideRecurrent" />
<span class="help-inline" ng-show="submitted && myForm.toDate.$error.required" >An End date is required.</span>
<font color="red" >{{dateValidation}}</font>
</div>
</div>
JS part
$scope.scheduleChange = function(){
if($scope.data.scheduler.name == 'Future Date'){
$scope.hideFutureDate = false;
$scope.hideRecurrent = true;
}
else if($scope.data.scheduler.name == 'Recurrent'){
$scope.hideFutureDate = true;
$scope.hideRecurrent = false;
}
I saw I can use ng-if to resolve this but not sure how.

You can indeed use ng-if to resolve this. Assuming your backend actually can handle blank inputs for things like data.startDate, then you can do:
<input ... ng-if="!hideRecurrent" />
Rather than show/hide the input, ng-if will actually remove it from the page when the condition is not met. And no input on the page means no validation error.

disable other fields when selecting a option from select dropdown

i'm working on a form and it has a select dropdown.in that dropdown it's showing several options. i want to disable some fields if a certain option is selected from the dropdown.
for example in my transaction type, if i select "Within Company" option i want to disable all the below fields ('Select Bank','Branch Name', 'Fund Transfer Remarks' ).
How to do this? i tried something but did not work.I'll post it here
Form
<ion-content class="has-header" scroll="true" padding="true">
<form id="myForm">
<label><h4><b>Beneficiary Name</b></h4></label>
<input type="text" id="beneName" name="beneName" ng-model="data.beneName" class="item-input-wrapper" >
<br>
<label><h4><b>Source Account Number</b></h4></label>
<select id="originAcc" style="margin: auto; width:100%; " ng-model="data.origin" ng-options="account.account for account in accountsArr">
<option value="" selected="selected">--Select Account--</option>
</select><br><br>
<label><h4><b>Transfer Amount</b></h4></label>
<input type="number" id="amount" name="amount" ng-model="data.amount" class="item-input-wrapper" decimal-places onkeypress='return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46'>
<br>
<label><h4><b>Beneficiary Account Number</b></h4></label>
<input type="text" id="beneAcc" name="beneAcc" ng-model="data.beneAcc" class="item-input-wrapper" >
<br>
<label><h4><b>Transaction Type</b></h4></label>
<select id="transtype" style="margin: auto; width:100%; " ng-model="data.transtype" ng-options="type.type for type in types" ng-change="hideFields()">
<option value="" selected="selected">--Select Transaction Type--</option>
</select>
<br><br>
<label><h4><b>Select Bank</b></h4></label>
<select id="beneBank" style="margin: auto; width:100%; " ng-model="data.beneBank" ng-options="bank.bank for bank in banks" ng-disabled="disableFields">
<option value="" selected="selected">--Select Bank--</option>
</select>
<br><br>
<label><h4><b>Branch Name</b></h4></label>
<select id="bname" style="margin: auto; width:100%; " ng-model="data.bname" ng-options="bname.bname for bname in bname" ng-disabled="disableFields">
<option value="" selected="selected">--Select Branch Name--</option>
</select>
<br><br>
<label><h4><b>Fund Transfer Remarks</b></h4></label>
<input type="text" id="narration" name="narration" ng-model="data.narration" class="item-input-wrapper">
<ion-checkbox ng-model="isChecked">Save as beneficiary</ion-checkbox>
<div class="col" style="text-align: center">
<button align="left" class="button button-block button-reset" style="display: inline-block;width:100px;text-align:center " ng-click="reset()" padding-top="true">Reset</button>
<button class="button button-block button-positive" style="display: inline-block;width:100px;margin-left:auto; margin-right:auto; " ng-click="thirdPartySubmit(data)" padding-top="true" >Transfer</button>
</div>
</form>
</ion-content>
</ion-view>
myController
.controller('thirdpartyTransferCtrl', ['$scope','$rootScope', 'checkEmptyObjects', 'refreshTextFields', '$http', '$ionicPopup', 'ApplicationSettings', function($scope, $rootScope, checkEmptyObjects, refreshTextFields, $http, $ionicPopup, ApplicationSettings) {
$scope.hideFields = function() {
if($scope.transtype == "Within Company") {
$scope.disableFields = true;
}
else{
$scope.disableFields = false;
}
};
$scope.types = [
{ type: 'Within Company' },
{ type: 'SLIPS Transction' },
{ type: 'CEFT Transction' },
];
$scope.banks = [
{ bank: 'Sampath Bank' },
{ bank: 'Seylan Bank' },
{ bank: 'BOC' },
];
$scope.bname = [
{ bname: 'Colombo 05' },
{ bname: 'Colombo 06' },
{ bname: 'Colombo 07' },
{ bname: 'Wanathamulla' },
];
}])

Make sure you add ng-disabled="disableFields" to all of the fields (its missing on Fund Transfer Remarks) then change
if($scope.transtype == "Within Company") {
to
if($scope.data.transtype.type == "Within Company") {