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>
Related
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>
I have troubles understanding how it works... basically when I submit my form, it is validated without checking the required inputs nor anything else.
I've set the 'novalidate' attribute to disable the HTML5 validation, then I've set all my fields as 'required' (same for my mail input with an email validation), and I'm using 'ngMessages' from Angular to check the inputs (is that even necessary??). But I can still submit the form without any field filled in... What am I doing wrong? Could it come from the fact that I use ng-submit and not ng-click?
Any help is appreciated !
https://jsfiddle.net/WebMoutarde/n1mocvco/
<div ng-controller="MyCtrl">
<form name="form" novalidate ng-submit="vm.signup()">
<div class="list">
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Nom</span>
<input type="text" name="nom" ng-model="vm.nom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Prénom</span>
<input type="text" name="prenom" ng-model="vm.prenom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mail</span>
<input type="email" name="mail" ng-model="vm.mail" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mot de passe</span>
<input type="password" name="password" ng-model="vm.password" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Confirmez votre mot de passe</span>
<input type="password" name="passwordCheck" ng-model="vm.passwordCheck" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
</div>
<div ng-messages="form.$error" role="alert">
<p style="text-align: center;" ng-message="required">You must fill in all fields</p>
<p style="text-align: center;" ng-message="email">Your email address is invalid</p>
</div>
<div class="item noborder">
<button class="button button-block button-positive" type="submit" >Créer un compte</button>
</div>
</form>
</div>
I've seen many SO questions about this but I still missing something...
You could disabled form submit button till form gets into valid state by using ng-disabled directive on form button
<button class="button button-block button-positive"
type="submit"
ng-disabled="form.$invalid">
Créer un compte
</button>
Or even better would be verify form has been valid or ng-submit method and then call your signup method of controller like below.
ng-submit="form.$valid && vm.signup()"
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 creating a mobile app using ionic framework.
I have a form which I have created for my hybrid mobile application..
I need to check whether the user has filled all the fields in the form..
my code...
<ion-view view-title="Request">
<ion-content>
<form novalidate>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Request Type:
</div>
<select>
<option selected>--Please select--</option>
<option>Car Pass Ticket</option>
<option>Seminar Pass</option>
<option>Identy Card</option>
</select>
</label>
<label class="item item-input">
<textarea placeholder="Description" name="description" ng-minlength="20" required ></textarea>
</label>
<br/>
<!-- <div class="padding">
<button class="button button-positive" ng-click="submit(description)">
Submit
</button>
</div> -->
<div class="padding">
<button class="button button-positive" ng-disabled="request.$invalid" ng-click="submit(description)">
Submit
</button>
</div>
</div>
</form>
</ion-content>
</ion-view>
Can some one kindly help me to validate the combo-box..
any kind of help is highly appreciated......
This should work
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
<div class="list">
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
</label>
<!--omitted-->
<input type="submit" class="button button-royal" value="register">
</div>
</form>
Form name is register_form,
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
Input name is user_first_name,
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
So validation must pass through those fields
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
Model itself doesn't have $invalid or $pristine properties, so it doesn't make sense
For phone field
<input type="number" name="user_phone" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
<span class="help-block" ng-show="register_form.user_phone.$error.required || register_form.user_phone.$error.number">Valid phone number is required</span>
<span class="help-block" ng-show="((register_form.user_phone.$error.minlength || register_form.user_phone.$error.maxlength) && register_form.user_phone.$dirty) ">phone number should be 10 digits</span>
Try this:
1) Give name attribute to your form
<form name="myForm" novalidate>
2) declare the request types inside of your scope like this:
$scope.requestType = [
{ code: "carPass", name: "Car Pass Ticket" },
{ code: "seminarPass", name: "Seminar Pass" },
{ code: "identityCard", name: "Identy Card"}
];
3) declare select box like this:
<select name="requestType" ng-model="request" required
ng-options="request.code as request.name for request in requestType" >
<option value="">--Please select--</option>
</select>
4) Inside submit method check for $valid attribute of form.
$scope.submit1 = function(description){
if($scope.myForm.$valid){
// Do your stuff
}else{
// Do your stuff
}
}
In my form with tag <form name="applyform" ng-submit="processForm(applyform.$valid)" class="form-horizontal" novalidate>
I have a radio button group, one option selected is required.
I'm unable to get this working.
<div class="form-group noMargin">
<label for="aanhef" class="col-sm-2 control-label">Aanhef:</label>
<div class="col-sm-10">
<div class="btn-group" data-toggle="buttons">
<p ng-show="applyform.aanhef.$invalid" class="help-block">
test
</p>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Dhr." value="Dhr." ng-required="!aanhef"> Dhr.
</label>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Mevr." value="Mevr." ng-required="!aanhef"> Mevr.
</label>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Fam." value="Fam." ng-required="!aanhef"> Fam.
</label>
</div>
</div>
</div>