I have created a simple form in ionic 1 but validations are not working correctly. Even though I have mentioned "required" in input field, it doesn't give required popup nor does "ng-show" display anything.
View.html:
<ion-view class="forms-view">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-title>
<span>Index Card</span>
</ion-nav-title>
<ion-content ng-controller="ValidationCtrl">
<div class="list card">
<form name="indexcard" class="list" novalidate>
<div class = "item">
<label class="item item-input item-stacked-label" name="dov" style="border-bottom: solid 1px #ccc;">
<i id="iconcolor" class="icon ion-calendar"></i> <span class="input-label" style="color:#ffab00">Date</span>
<input type="date">
</label>
<label class="item item-input" name="patientname" style="border-bottom: solid 1px #ccc;">
<i id="iconcolor" class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="Patient Name" ng-model="patientname" required />
<span ng-show="indexcard.patientname.$error.required">The Patient Name is required.</span>
</label>
<label class="item item-input" name="sdwname" style="border-bottom: solid 1px #ccc;">
<i id="iconcolor" class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="S/W/D" ng-model="sdwname" required/>
<span ng-show="indexcard.sdwname.$touched && indexcard.sdwname.$invalid">The name is required.</span>
</label>
<center>
<button type="submit" class="button button-dark" ng-click="submit(patientname)">
Submit
</button>
</center>
Related
i want to remove the border around the ionic-toggle
<ion-content ng-init="checkarrivee.getAllListeCriteres();">
<div class="swipe" on-swipe-left="warn('Must use scope')">Swipe div</div>
<div class="list" style="width: 95%;margin-left: 2%">
<span us-spinner="{color: 'blue', radius:30, width:8, length: 16}" spinner-key="spinner-0"></span>
<label class="item item-input item-stacked-label">
<span class="input-label">Mission en cours :</span>
<input ion-autocomplete name="vehicule" type="text" readonly="readonly" class="ion-autocomplete"
items-clicked-method="itemsClicked(callback)"
items-removed-method="itemsRemoved(callback)"
placeholder="Séléctionner une mission"
items-method="getMissionEnCours(query)"
external-model="initialCountry"
item-view-value-key="codeDeFicheDeMission"
items-method-value-key="items"
max-selected-items="1"
autocomplete="off"
ng-model="checkarrivee.ficheDeMission"
required/>
</label>
</div>
<ion-list ng-repeat="(key,value) in checkload | groupBy:'Niveau'">
<div class="item item-divider" >{{key}}</div>
<ion-item on-swipe-left="warn('Must use scope')" ng-repeat="var in value" >
<ion-toggle ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(var)" ng-show="var.star">
</button>
<ion-option-button class="button-dark" >
<i class="icon ion-star"></i>
</ion-option-button>
</ion-item>
</ion-list>
image:
If you do not want the border to show for the toggle's just add style='border:0;' like this:
<ion-toggle style="border:0;" ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
But I would suggest not using inline CSS, and instead adding all styling to your css/scss file as it will become much more difficult to maintain as the project scales.
EDIT:
For the CSS it will be something like this .list .item .noToggleBorder{border:0;}
Here's a codepen for you to check it out.
Issue: I have a simple add item form that adds a picture from the phone's album in a view. For some reason, after adding ion-content scroll="true", the page still doesn't allow for scrolling.
Also, I've set $ionicScrollDelegate to refresh in the controller. Thanks!
<ion-view title="Add Item">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<!-- <ion-scroll direction="y" style="height: 800px;"> -->
<ion-pane>
<div class="row">
<div class="col text-center">
<button class="button button-calm" ng-click="getPhoto()"><i class="ion-camera"></i> Select Photo</button>
</div>
</div>
<div class="list card" ng-show="item.pic">
<div class="item">
<img class="full-image" src="data:image/jpg;base64,{{item.pic}}">
</div>
</div>
<form ng-submit="submitItem()" name="newItemForm" novalidate>
<label class="item item-input">
<span class="input-label" type="text">* Designer: </span>
<input type="text" ng-model="item.designer" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Type/Collection: </span>
<input type="text" ng-model="item.collection" ng-required="true">
</label>
<p ng-show="newItemForm.item.collection.$error.required">Type/Collection Required</p>
<label class="item item-input">
<span class="input-label" type="text">* Color: </span>
<input type="text" ng-model="item.color" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Size: </span>
<input type="text" ng-model="item.size" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">Material: </span>
<input type="text" ng-model="item.material">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Condition: </span>
<input type="text" ng-model="item.condition" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Description: </span>
<textarea type="text" ng-model="item.description" ng-required="true"></textarea>
</label>
<p ng-show="newItemForm.$invalid" class="warning">*Items must be filled in to Add Item</p>
<div class="row">
<div class="col text-center">
<button type="submit" class="button button-balanced" ng-disabled="newItemForm.$invalid"><i class="ion-plus"></i> Add Item</button>
</div>
</div>
</form>
</ion-pane>
<!-- </ion-scroll> -->
</ion-content>
</ion-view>
I am wondering how to store an object into a scope. I am not sure if my syntax is correct. My objective is to setup up the data-binding on this edit page, and then store the edited object on the scope. But data won't get pushed into the array
$scope.editedRecord = function (editedExpensesInfo) {
$scope.tempData.push(editedExpensesInfo)
}
$scope.save = function() {
WebApi.editData($scope.tempData);
};
TempData is my array in the service.
angular.module('app')
.factory('WebApi', function () {
var tempData = [];
return{
editData: function (data) {
return tempData = data;
},
}
}
This is my edit form
<!--Ion-nav-header-bar-->
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-back-button class="button-clear" ng-click="myGoBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<!--ion-nav-side-menu-button-->
<!--<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>-->
<!--Content for Expenses page-->
<ion-content has-header="true" padding="true">
<div ng-controller="editExpensesDetailCtrl" ng-model="editedExpensesInfo">
<form name="editExpensesDetailform" ng-submit="editedRecord(editedExpensesInfo)>
<label class="item item-input ">
<b class="input-label">Owner:</b>
{{data.owner}}
</label>
<label class="item item-input">
<b class="input-label">Receipt Date:</b>
<!--{{data.modifiedDate | date: "yyyy-MM-dd"}}-->
<input style="margin-left: 20%;" ng-model="editedExpensesInfo.newDate" type="date" placeholder="Date" required>
</label>
<!--<label class="item item-input">
<b class="input-label">Claim Type:</b>
{{data.claimType}}
</label>-->
<label class="item item-input item-select">
<b class="input-label">Claim Type:</b>
<select ng-model="editedExpensesInfo.newClaimType" required>
<option value="" title="Select Claim" selected disabled>Claim Type</option>
<option ng-repeat="claim in claimType" value="{{claim.value}}"
ng-selected="{{claim.value== claimType}}">
{{claim.value}}
</option>
</select>
</label>
<br />
<!--Remarks Textfield-->
<br />
<b>Remarks:</b>
<br />
<label>
<!--<span style="margin-bottom:auto"> {{data.description}}</span>-->
<textarea ng-model="editedExpensesInfo.newDescription" rows="6" cols="50" placeholder="Your remarks..." style="resize:none; border:solid 1px;"></textarea>
</label>
</form>
<br />
<a class="button button-positive" ng-click="save()">Save</a>
</div>
</ion-content>
</ion-view>
Your controller function editedRecord is not getting called.
Check the ngSubmit documentation.
You need to add a submit button. for example:
<input type="submit" id="submit" value="Save Edit" />
Hope this helps.
I Want the button that submit form just stay enabled when the form is valid:
<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
Salvar
</button>
<form name="myForm">
<label class="item item-input">
<span class="input-label">Nome</span>
<input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
</label>
</form>
I think the issue is the button is before form so they are not "seeing" myForm.$invalid. If you ask me why I cant put button inside form, is because this button is on bar header of the app and the form is bellow.
How can I handle this situation??
You can use ng-form directive. ng-form
<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
Salvar
</button>
<div data-ng-form name="myForm">
<label class="item item-input">
<span class="input-label">Nome</span>
<input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
</label>
</div>
You can both try by setting the form including both controls:
<form name="myForm">
<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
Salvar
</button>
<label class="item item-input">
<span class="input-label">Nome</span>
<input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
</label>
</form>
Or in cases where you don't want to break the layout or don't need a form, with ng-form directive:
<div class="item item-input-inset" ng-form="myForm">
<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
Salvar
</button>
<label class="item item-input">
<span class="input-label">Nome</span>
<input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
</label>
</div>
I am using radio buttons in a popover to create a dropdown type filter for my app.
When I use an iPad the radio buttons go haywire! This works perfectly on every other device.
Best illustration is in this video
https://www.youtube.com/watch?v=Begkz4uS8hQ
Here is my code:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="item bar-header bar-positive">
<h2 class="title">Difficulty</h2>
</div>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="" name="group">
<div class="item-content">
All
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Easy" name="group">
<div class="item-content">
Easy
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Medium" name="group">
<div class="item-content">
Medium
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Hard" name="group">
<div class="item-content">
Hard
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Expert" name="group">
<div class="item-content">
Expert
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-popover-view>
</script>
And displayed using this:
<button class="button button-positive button-small col col-20 icon-left ion-connection-bars filter-button" ng-click="popover.show($event)">
{{filter.difficulty || 'All'}}
</button>
Many thanks to anyone who can help.