Form is not accessible inside controller - angularjs

I have this ionic page:
<ion-view view-title="Sign up for business">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-android-done" ng-disabled="bizzSForm.$invalid" ng-click="submitBizzForm()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm()" novalidate>
<div class="list">
<label class="item item-input">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="Your business or organization name" name="name" ng-model="bizzFormData.name" ng-minlength="3" ng-maxlength="50" required>
</label>
<div ng-show="bizzSForm.$submitted || bizzSForm.name.$touched">
<span ng-show="bizzSForm.name.$error.required" class="form-err-blk"><i class="ion-close-round"></i> Tell us your business or organization name.</span>
</div>
I have this controller code:
$scope.submitBizzForm = function() {
if($scope.bizzSForm.$valid) {
$scope.submitSignUpForm();
}
}
here $scope.bizzSForm is showing undefined

You can pass the bizzSForm in the ngSubmit callback, and use it as it is:
HTML
<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm(bizzSForm)" novalidate>
<!-- content -->
</form>
Javascript
$scope.submitBizzForm = function(form) {
if(form.$valid) {
$scope.submitSignUpForm();
}
};

You need to pass form name as a parameter to the function you want ngSubmit to handle.
<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm(bizzSForm)" novalidate>
You see that, form should have a name, name="bizzSForm" and pass into function, ng-submit="submitSignUpForm(bizzSForm)"
then inside controller, you just need to call it,
$scope.submitSignUpForm = function(bizzSForm) {
if(bizzSForm.$valid) {
// do something here
console.log('Form is valid');
}
}

Related

How to get the values that are in ng-model, which comes from a select in angularjs1?

I created a select, where I get a person and their values. But when I try to pass these values on ng-model this is giving undefined.
in html.
<ion-view view-title="Cadastro Livro Preto">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-content>
<div class="list card">
<select ng-model="cadLivroPreto" ng-options="y.nome for (x, y) in linkPessoasLoja">
</select>
<label class="item item-input item-stacked-label">
<h3 ng-model=cadLivroPreto.nome>Nome: {{cadLivroPreto.nome}}</h3><br/>
</label>
<label class="item item-input item-stacked-label">
<h3 ng-model="cadLivroPreto.cpf">CPF: {{cadLivroPreto.cpf}}</h3><br/>
</label>
</div>
<h3>teste: {{cadLivroPreto.id}}</h3><br/>
<h3>teste: {{cadLivroPreto.nome}}</h3><br/>
<!--
Acrescentar telefone
-->
</div>
<button class = "button button-block button-dark" ng-click="Cadastrar()"> Cadastrar</button>
</ion-content>
</ion-view>
in my controller.js
$scope.cadLivroPreto = {};
//$scope.pessoa = {};
$scope.Cadastrar = function(){
console.log($scope.cadLivroPreto.nome);
console.log($scope.cadLivroPreto.cpf);
};
In the html what is in the expression {{}} I can see on the screen, but when I try to give console.log the same putting it in the ng-model in the controller is appearing undefined.
Can anybody help me ? I do not know what I'm doing wrong.

Is it possible to update multiple json object using just one function and one button using angularjs?

Her's the HTML code
<ion-view view-title="Reviewer Title">
<ion-content>
<div class="content no-header">
<ion-nav-bar class="bar-assertive-900" align-title="left">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-android-arrow-back" ui-sref="app.reviewers"> </button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-android-done-all"
ng-click="edtRv.edit(edtRv.e[0].id,qs_id,chs_id, rv_object,qs_object,chs_object)"> </button>
<button class="button button-icon button-clear ion-trash-b"> </button>
</ion-nav-buttons>
</ion-nav-bar>
<br> <br> <br>
<div class="blk">
<input type="text" value="{{edtRv.e[0].rev_name}}" >
</div>
<div class="button-bar">
<a class="button button-outline button-assertive" ng-click="showCard()"> show all</a>
<a class="button button-outline button-assertive" ng-click="hideCard()"> hide all</a>
</div>
<form ng-repeat="edit in edtRv.e">
<ion-item ng-if="edit.question_type_id == 1">
<ion-checkbox ng-if=""> </ion-checkbox>
<div class="list list-inset">
<div>
Rv id{{edit.id}}
Qstn id{{edit.id1}}
Chs id{{edit.id2}}
<label class="item item-input">
<b><span class="input-label item-num"> {{$index+1}}.) </span> </b>
<input type="text" ng-value="edit.question">
</label>
</div>
<div id="startCard" ng-show="showstartCard">
<label class="item item-input">
<b><span class="input-label item-num"> Answer: </span> </b>
<input type="text" ng-value="edit.answer">
</label>
</div>
</div>
</ion-item>
<ion-item ng-if="edit.question_type_id == 2">
<ion-checkbox ng-if=""> </ion-checkbox>
<div class="list list-inset">
<div>
Rv id{{edit.id}}
Qstn id{{edit.id1}}
Chs id{{edit.id2}}
<label class="item item-input">
<b><span class="input-label item-num"> {{$index+1}}.) </span> </b>
<input type="text" ng-value="edit.question">
</label>
</div>
<div id="startCard" ng-show="showstartCard">
<label class="item item-input">
<b><span class="input-label item-num"> Answer: </span></b>
<input type="text" ng-value="edit.answer">
</label>
<label class="item item-input">
<b><span class="input-label item-num"> choice 1: </span></b>
<input type="text" ng-value="edit.choice_1">
</label>
<label class="item item-input">
<b><span class="input-label item-num"> choice 2: </span></b>
<input type="text" ng-value="edit.choice_2">
</label>
<label class="item item-input">
<b><span class="input-label item-num"> choice 3: </span></b>
<input type="text" ng-value="edit.choice_3">
</label>
</div>
</div>
</ion-item>
</form>
</ion-content>
What Im trying to do is to update the reviewers title the questions and the choices that follow with just one function or one button in the view.I don't want button each item so is there's a way on how to do this?Thank you :D
Here's the Service file
service.update = function (rv_id,qs_id,chs_id, rv_object,qs_object,chs_object) {
// return $http.put(getUrlForId(id), object);
// for updating rev object
return $http.put(getRevUrlForId(rv_id), rv_object)
.then(function (result) {
console.log(result.data);
});
// for updating qstn object
return $http.put(getQsUrlForId(qs_id), qs_object)
.then(function (result) {
console.log(result.data);
});
// for updating chs object
return $http.put(getChoicesUrlForId(chs_id), chs_object)
.then(function (result) {
console.log(result.data);
});
};
Here's the controller
.controller('EditRevCtrl', function($scope, $timeout, $stateParams, $ionicPopup, ionicMaterialInk, ItemsModel, Backand) {
var edtRv = this;
edtRv.e = ItemsModel.getcontForEdit(); // use for getting reviewers info
function edit (rv_id,qs_id,chs_id, rv_object,qs_object,chs_object) {
ItemsModel.update(rv_id,qs_id,chs_id, rv_object,qs_object,chs_object);
}
})
Certainly!
First you should inject $q into your service as we will use it below.
Using Q you can pass an array of promises to be resolved.
service.update = function (rv_id,qs_id,chs_id, rv_object,qs_object,chs_object) {
return $q.all([
$http.put(getUrlForId(id), object),
$http.put(getRevUrlForId(rv_id), rv_object),
$http.put(getQsUrlForId(qs_id), qs_object),
$http.put(getChoicesUrlForId(chs_id), chs_object),
]).then(function(results) {
var UrlForId = results[0];
var RevUrlForId = results[1];
var QsUrlForId= results[2];
var ChoicesUrlForId= results[3];
return results;
})
};

How to give a specific value to input with ' ng-model="searchQuery" '?

I am creating an app using Ionic Framework and I'm facing a problem.
I'd like to create a search function with tags. When we click on a button, the value is given to an input.
My code :
<div id="rech-btns" class="padding" ng-model="searchQuery" ng-controller="RechCtrl">
<button class="button button-outline button-balanced espace rech-text" ng-click="showDiv('Facile')">
Facile
</button>
<!-- There are others buttons but I deleted them for you to see the whole code -->
</div>
<div id="rechrech">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!-- <input type="search" placeholder="Recherche..." /> -->
<input type="search" ng-model="searchQuery">
<!--<input type="text" text="facile" ng-model="searchQuery">-->
</label>
<div class="padding">
<button id="paramrech" class="button button-outline button-balanced espace rech-text">
<!-- the value arrives here -->
</button>
</div>
I tried to change the value with my function but it doesn't work so I'm asking you :p
My function :
.controller('RechCtrl', function($scope) {
$scope.showDiv = function(param) {
document.getElementById('rech-btns').style.display = "none";
//so when we click, this disappear
document.getElementById('rechrech').style.display = "block";
//this appear
document.getElementById("paramrech").innerHTML = param;
//and here I don't know what to do to change what I want
};
})
Do you have any idea ?

ionic, ng-click only works on the second click

im starting to work with ionic, i tried creating a log-in page, and it works, i can see on the log that when i clicked the function executed and looked for the user, however nothing happens, i have to click 2 or 3 times so that the view can change i have no idea why this happens. i tried with the submit tag on the form too, and it stays the same.
HTML:
<body>
<ion-view view-title="Iniciar Sesion">
<ion-content has-header="true" padding="true">
<form name="loginForm" novalidate="">
<div class="row row-center">
<div class="col col-center">
<label class="item item-input">
<span class="input-label">Correo</span>
<input type="text"
ng-model="Usuario">
</label>
<label class="item item-input">
<span class="input-label">Contraseña</span>
<input type="password" ng-model="contrasena" ng-minlength="5" ng-maxlength="20" required >
</label>
<button ng-click="login(Usuario,contrasena)"value="Iniciar" class="button button-block button-calm" ng-disabled="!Usuario || !contrasena">
Iniciar
</button>
{{erronea}}
</div>
</div>
</form>
<ion-tabs class="tabs-dark tabs-icon-top">
<ion-tab title="Olvidé mi contraseña" href="#/olvide" icon="ion-information- circled" ></ion-tab>
<ion-tab title="Crear Cuenta" href="#/CrearU" icon="ion-person-add" ></ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
</body>
Javascript:
var datosLogin= function($scope,$location) {
$scope.login=function (Usuario,contrasena){
var ref = new Firebase('https://resplendent-torch-5430.firebaseio.com/');
ref.authWithPassword({
email : Usuario,
password : contrasena
},
function(error, authData) {
if (error) {
$scope.erronea="Usuario o contraseña invalida";
} else {
$location.path("/inicio");
}
});
};
}

How do you store an object into scope

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.

Resources