I have a html file as follows to enter details of user, when i press submit it should go to a file created my myself(myfile.json)which is empty now.
please provide code for that.
<ion-view view-title="employee">
<ion-content>
<!-- <input type="date" id=FromDate" name="FromDate" ng-model="FromDate" date-format="yyyy-MM-dd"/> -->
<form name="formname" ng-submit="logdata(formname)">
<h1 >{{data.FromDate|date}}</h1>
<label class="item item-input ">
<div class="input-label">date:</div>
<input type="date" name="name" value="" ng-model="data.FromDate"></input>
</label>
<div class="list">
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Project
</div>
<select ng-options="project.name as project.name for project in projects" ng-model="data.selectedProject">
<!-- <option>createwhimsy</option>
<option selected>activity tracker</option>
<option>big iron</option> -->
</select>
</label>
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Manager
</div>
<select ng-model="data.manager">
<option selected>deepa</option>
</select>
</label>
</div>
<label class="item item-input item-stacked-label">
<span class="input-label">task</span>
<textarea placeholder="task details goes here" rows="8" cols="10" ng-model="data.task"></textarea>
</label>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Estimated time(hrs)
</div>
<select ng-model="data.time">
<option selected>1</option>
<option selected>2</option>
<option selected>3</option>
<option selected>4</option>
<option selected>5</option>
<option selected>6</option>
</select>
</label>
</div>
<button type="submit" class="button button-calm">
submit
</button>
</form>
</ion-content>
</ion-view>
possible, need simple code, in controller.with pure angularjs.
Related
I was trying to disable the submit button, when the fields are empty. But its not working. Don't know why its not working. Saw many blogs, but could't figure whats the issue.
<form name="createForm">
<div class="form-group col-md-6">
<label for="createName">Student</label>
<select class="form-control" name="student" id="createName" ng-
model="createStudent.studentId" ng-options="item.name for item in
allStudent" required>
<option value="" selected disabled>Select</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="createClass">Class</label>
<select class="form-control" name="class" id="createClass" ng-
model="createStudent.classId" ng-options="item.number for item in
allClass" required>
<option value="" selected disabled>Select</option>
</select>
</div>
</div>
<div class="form-group col-md-6 text-md-center">
<label for="createCategory">Type of Category</label>
<select class="form-control" name="category" id="createCategory"
ng-model="createStudent.type" ng-options="item.category_type for
item in allcategoriestypes" required>
<option value="" selected disabled>Select</option>
</select>
</div>
</div>
<div class="row align-items-end justify-content-center">
<div class="form-group col-md-6 text-md-center">
<label for="createTeacherName">Teacher Name</label>
<input type="text" class="form-control" name="teacher"
id="createTeacherName" ng-model="createStudent.name"
placeholder="Enter Teacher Name" required>
</div>
</div>
</div>
<div class="text-center pt-1">
<button type="submit" class="btn btn-info px-5" ng-
click="create(createStudent)" ng-
disabled="createForm.$invalid">Save</button>
</div>
</form>
it is working fine.it disable the submit button, when the fields are empty.
<!DOCTYPE html>
<html>
<body>
<form name="createForm">
<div class="form-group col-md-6">
<label for="createName">Student</label>
<select class="form-control" name="student" id="createName" ng-
model="createStudent.studentId" ng-options="item.name for item in
allStudent" required>
<option value="" selected disabled>Select</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="createClass">Class</label>
<select class="form-control" name="class" id="createClass" ng-
model="createStudent.classId" ng-options="item.number for item in
allClass" required>
<option value="" selected disabled>Select</option>
</select>
</div>
</div>
<div class="form-group col-md-6 text-md-center">
<label for="createCategory">Type of Category</label>
<select class="form-control" name="category" id="createCategory"
ng-model="createStudent.type" ng-options="item.category_type for
item in allcategoriestypes" required>
<option value="" selected disabled>Select</option>
</select>
</div>
</div>
<div class="row align-items-end justify-content-center">
<div class="form-group col-md-6 text-md-center">
<label for="createTeacherName">Teacher Name</label>
<input type="text" class="form-control" name="teacher"
id="createTeacherName" ng-model="createStudent.name"
placeholder="Enter Teacher Name" required>
</div>
</div>
</div>
<div class="text-center pt-1">
<button type="submit" class="btn btn-info px-5" ng-
click="create(createStudent)" ng-
disabled="createForm.$invalid">Save</button>
</div>
</form>
</body>
</html>
Please find the working plunker for your code :
http://plnkr.co/edit/H1LOahFNWRXYHWTVmrcW?p=preview
<form name="createForm">
<div class="form-group col-md-6">
<label for="createName">Student</label>
<select class="form-control" name="student" id="createName" ng-
model="createStudent.studentId" required>
<option value="studentValue">Student Name</option>
</select>
</div><br/>
<div class="form-group col-md-6">
<label for="createClass">Class</label>
<select class="form-control" name="class" id="createClass" ng-
model="createStudent.classId" required>
<option value="classValue">Class</option>
</select>
</div><br/>
<div class="form-group col-md-6 text-md-center">
<label for="createCategory">Type of Category</label>
<select class="form-control" name="category" id="createCategory"
ng-model="createStudent.type" required>
<option value="typeValue">Category</option>
</select>
</div><br/>
<div class="row align-items-end justify-content-center">
<div class="form-group col-md-6 text-md-center">
<label for="createTeacherName">Teacher Name</label>
<input type="text" class="form-control" name="teacher"
id="createTeacherName" ng-model="createStudent.name"
placeholder="Enter Teacher Name" required>
</div>
</div><br/>
<div class="text-center pt-1">
<label>Value returned for $invalid :: {{createForm.$invalid}}</label><br/><br/>
<button type="submit" class="btn btn-info px-5" ng-click="create(createStudent)" ng-disabled="createForm.$invalid">Save</button>
</div>
</form>
Make sure all your tags are properly closed and none of your fields are empty.
I've reading how to handle whether a forms is valid or invalid, and I can't figure it out why I cannot make my code work properly.
My Html form
<form name="signupForm" ng-submit="submitRegistration(signup)" ng-init="signup = {}" novalidate>
<input type="email" placeholder="Email" name="email" ng-model="signup.email"required></input>
<input type="password" placeholder="Password" name="password" ng-model="signup.password"required></input>
<button type="submit" class="button button-block button-balanced">
Registrarme!
</button>
</form>
My controller
$scope.submitRegistration = function(signupForm){
debugger;
$scope.msg = {};
if ($scope.signupForm.$valid){
//something}else{
console.log('INVALID')
}
I tried $scope.signupForm.$valid and signupForm.$valid... both I got undefined.
How can I do this in the controller side?
EDIT this is my full code (is registration form, I am using Ionic framework)
<ion-view view-title="Registrate!">
<ion-content class="padding">
<h1 class="general-title">BuenjugadorApp</h1>
<button class="button button-block facebook-button icon-left ion-social-facebook" ng-click="facebookSignup()">Registrate con Facebook</button>
<button class="button button-block button-balanced" ng-click="nosotros = true">Registrate con Nosotros</button>
<div class="error-notice" ng-if="msg.error">
<span>¡Ocurrió un error! Vuelve a intentarlo.</span>
</div>
<div class="error-notice" ng-if="msg.required">
<span>¡Todos los campos deben ser completados!</span>
</div>
<div class="error-notice" ng-if="msg.different_passwords">
<span>¡Las contraseñas ingresadas no coinciden!</span>
</div>
<div class="error-notice" ng-if="msg.too_big_password">
<span>¡Las contraseña es demasiado larga, no puede superar los 12 caracteres!.</span>
</div>
<br>
<div >
<form name="signupFormulario" ng-submit="submitRegistration(signupForm)" ng-init="signupForm = {}" novalidate>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email" name="email" ng-model="signupForm.email"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Nombre</span>
<input type="text" placeholder="Nombre" name="nombre" ng-model="signupForm.nombre"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Apellido</span>
<input type="text" placeholder="Apellido" name="apellido" ng-model="signupForm.apellido"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Contraseña</span>
<input type="password" placeholder="Contraseña" name="password" ng-model="signupForm.password"required>
</label>
<span class="advise">La contraseña debe ser mayor o igual a 6 caracteres.</span>
<label class="item item-input item-floating-label">
<span class="input-label">Repetir Contraseña</span>
<input type="password" placeholder="Repetir Contraseña" name="password" ng-model="signupForm.password_confirmation"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Edad</span>
<input type="number" placeholder="Edad" name="edad" ng-model="signupForm.edad" min="10" max="99" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Teléfono</span>
<input type="number" placeholder="Teléfono" name="telefono" max="999999999999999" ng-model="signupForm.telefono" required>
</label>
<span class="advise">Debes ingresar tu número para que los jugadores puedan contactarse mejor con vos.</span>
<label class="item item-input">
</label>
<label class="item item-input item-select">
<div class="input-label">
Tu Equipo
</div>
<select ng-model="signupForm.equipo2" ng-init="signupForm.equipo2 = {}" required>
<option ng-value="equipo" ng-repeat="equipo in equipos">{{equipo.nombre}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿De qué jugás?
</div>
<select name="posicion" ng-model="signupForm.posicion" required>
<option ng-value="posicion.nombre" ng-repeat="posicion in posiciones">{{posicion.nombre}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿De dónde sos?
</div>
<select name="lugar" ng-model="signupForm.provincia" ng-change="cambiovalor(signupForm.provincia)" required>
<option ng-value="prov" data-ng-repeat="(prov, ciudadesss) in complejos">{{prov}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿Ciudad?
</div>
<select ng-disabled="!signupForm.provincia" ng-model="signupForm.ciudad" name="city" required>
<option ng-value="ciudad" data-ng-repeat="ciudad in ciudades">{{ciudad}}</option>
</select>
</label>
<button type="submit" class="button button-block button-balanced">
Registrarme!
</button>
<div class="centered">
<a ng-href="#/login">Ya tengo una cuenta.</a>
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
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>
In my page below everything is working except for the user.productNumber input at the bottom. What I mean is that all the "required" fields are keeping the "Create Account" button disabled but it's like the productNumber input is being ignored. How can I get this working?
<ion-view title="Sign Up">
<ion-content>
<form name="signUpForm">
<div class="list">
<label class="item item-input item-stacked-label">
<input data-ng-model="user.email" data-ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" type="email" placeholder="user#mail.net" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.password" type="password" placeholder="password" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.passwordAgain" type="password" placeholder="password (again)" required>
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input data-ng-model="user.newsletter" type="checkbox" checked>
</label>
Weekly Newsletter
</li>
<label class="item item-input item-stacked-label">
<input data-ng-modal="user.productNumber" data-ng-pattern="/^[a-zA-Z0-9-]{8}$/" type="text" placeholder="Product Number" required>
</label>
<button data-ng-click="createAccountClick()" data-ng-disabled="signUpForm.$invalid" class="button button-full button-positive">
Create Account
</button>
</div>
</form>
</ion-content>
</ion-view>
This is because you mispelled data-ng-model with data-ng-modal.
Simply change:
data-ng-modal="user.productNumber"
with
data-ng-model="user.productNumber"
I have form which contains some fields and have validated these fields by using angular.validator. The error messages are displayed under every fields. But I want to display this error messages using tooltip. For example , if some particular field is not valid , the error message should be shown on the right of the field box. I didn't found a solution from other posts of stackoverflow. How to do this ?
I want to show this field is required in a tooltip. ( by making directive) .
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Contact No</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label>
<div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 ">
<input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Language</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.language" validator="[required]">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 1</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 2</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">City</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">State</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.state" validator="[required]">
<option></option>
<option value="Indonesia">Tamilnadu</option>
<option value="Indonesia">Kerala</option>
<option value="Indonesia">Rajasthan</option>
</select>
</div>
</div>
I use http://angular-ui.github.io/bootstrap which has a $tooltipProvider that allows you to modify behavior of the tooltip. Other than that this seems like a CSS + ng-show candidate