I have a form and I want to check its validation, but form.$valid return me always true, also when form is not compiled!
<form name="compileForm" novalidate>
<table class="mytable">
<td ng-switch="question.type" style="width:25%" >
<div directive-one ng-switch-when="text" >
</div>
<div directive-two ng-switch-when="single" >
<div class="radio" ng-repeat="(optionIndex, option) in my.choices">
<input type="radio"
name="optradio{{groupIndex}}_{{qIndex}}"
id="optradio{{groupIndex}}_{{qIndex}}_{{optionIndex}}"
ng-model="option.select"
ng-value="true"
ng-change="changeValue(my.choices, optionIndex, qIndex, groupIndex)"
ng-disabled="{{sdisable}}"
required>
<label class="radio-inline"
for="optradio{{groupIndex}}_{{qIndex}}_{{optionIndex}}">{{option.option}}
</label>
</div>
</div>
</td>
<td> <span>{{compileForm.$valid}}</span></td>
</table>
</form>
Any help would be appreciate!
Related
ng-required not working with condition. Error message not display if ng-required condition is true. please give me solution
<form name="selfApprForm" novalidate ng-submit="SubmitAppraisal()">
<div class="form-group">
<textarea type="text" class="form-control" name="comments"
placeholder="Comment..." style=" height: 80px;" ng-
model="appList.Comments" ng-required="(appList.Rating>3) ? true :
false">
</textarea>
<!-- validation -->
<div ng-class="{'has-error' : (selfApprForm.comments.$dirty ||
selfApprForm.comments.$touched) &&
selfApprForm.comments.$invalid}">
<div class="errorMsg">
<div ng-show="(selfApprForm.comments.$dirty ||
selfApprForm.comments.$touched) ">
<div ng-show="selfApprForm.comments.$error.required">
If Rating is 4 to 5, employee or reviewer needs
to justify with clomments.
</div>
</div>
</div>
</div>
</div>
<!--Button-->
<div class="form-group">
<button class="btn btn-primary" type="submit" value="submit" ng-
disabled="selfApprForm.$invalid">{{UiLabels.btn_submit }}
</button>
</div>
</form>
you can convert you code from
<textarea type="text" class="form-control" name="comments"
placeholder="Comment..." style=" height: 80px;" ng-
model="appList.Comments" ng-required="(appList.Rating>3) ? true :
false">
</textarea>
to
<textarea type="text" class="form-control" name="comments"
placeholder="Comment..." style=" height: 80px;" ng-
model="appList.Comments" ng-required="appList.Rating>3">
</textarea>
As angular evaluate expression appList.Rating>3 as in true/false.
The above solution should work, assuming there is no other error is occurring somewhere in your code.
Am new to angularjs, i need to http post the dynamic form data to an API.
app.js
$scope.contacts = [
{ 'cpName':'',
'cpDesignation':'' ,
'cpDept': '',
'cpEmail': '',
'cpMobile':''
}
];
$scope.addRow = function(){
$scope.contacts.push({ 'cpName':$scope.cpName, 'cpDesignation': $scope.cpDesignation, 'cpDept':$scope.cpDept, 'cpEmail':$scope.cpEmail, 'cpMobile':$scope.cpMobile});
$scope.cpName='';
$scope.cpDesignation='';
$scope.cpDept='';
$scope.cpEmail='';
$scope.cpMobile='';
};
contact form
<form name="myform" role="form" ng-submit="addRow()">
<div class="row" ng-class="{true: 'error'}[submitted && myform.cpEmail.$invalid]">
<div class="form-group">
<label class="col-md-2 control-label">CONTACT PERSON</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpName"
ng-model="cpName" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DESIGNATION</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDesignation"
ng-model="cpDesignation" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DEPARTMENT</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDept"
ng-model="cpDept" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">EMAIL*</label>
<div class="col-md-4">
<input type="email" class="form-control" name="cpEmail"
ng-model="cpEmail" />
<span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
<span ng-show="myform.cpEmail.$error.required">Email is required.</span>
<span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">MOBILE</label>
<div class="col-md-4">
<input type="number" class="form-control" name="cpMobile"
ng-model="cpMobile" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Add" class="btn btn-primary"/>
</div>
</div>
</div>
</form>
<table>
<tr>
<th>CONTACT PERSON</th>
<th>DESIGNATION</th>
<th>DEPARTMENT</th>
<th>EMAIL</th>
<th>Mobile</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.cpName}} </td>
<td>{{contact.cpDesignation}} </td>
<td>{{contact.cpDept}} </td>
<td>{{contact.cpEmail}} </td>
<td>{{contact.cpMobile}} </td>
</tr>
</table>
I know how to handle a single form data but not dynamic data.. Any help will be appreciated.
Thank you
Use ng-repeat over the rows.. So, in starting your $scope.contacts has 1 row and hence it will show one row in html.. Now push new object to $scope.contacts and then 2 rows will come in UI.
So, now just by pushing empty object to $scope.contacts you can get any number of rows.
Don't worry about the data every row will maintain its own data in the $scope.contacts array .. and at last just send this object to server. So, now you have dynamic rows.
Define your form like this
<div class="row" ng-repeat="contact in contacts">
<div class="form-group">
<label class="col-md-2 control-label">CONTACT PERSON</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpName"
ng-model="contact.cpName" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DESIGNATION</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDesignation"
ng-model="contact.cpDesignation" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DEPARTMENT</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDept"
ng-model="contact.cpDept" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">EMAIL*</label>
<div class="col-md-4">
<input type="email" class="form-control" name="cpEmail"
ng-model="contact.cpEmail" />
<span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
<span ng-show="myform.cpEmail.$error.required">Email is required.</span>
<span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">MOBILE</label>
<div class="col-md-4">
<input type="number" class="form-control" name="cpMobile"
ng-model="contact.cpMobile" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Add" class="btn btn-primary"/>
</div>
</div>
</div>
<input type="button" value="Add" class="btn btn-primary" ng-click="upload()"/>
<table>
<tr>
<th>CONTACT PERSON</th>
<th>DESIGNATION</th>
<th>DEPARTMENT</th>
<th>EMAIL</th>
<th>Mobile</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.cpName}} </td>
<td>{{contact.cpDesignation}} </td>
<td>{{contact.cpDept}} </td>
<td>{{contact.cpEmail}} </td>
<td>{{contact.cpMobile}} </td>
</tr>
</table>
Here's your controller code
$scope.contacts = [{}];
$scope.upload = function(){
//api call
}
$scope.addRow = function(){
$scope.contacts.push({});
};
I have two forms on a single page. One form I am adding/deleting which is working fine. Now in the second form (which I don't want to do anything through angular)
But I am not able to submit this(second form). Both the forms are inside my app. Anybody have any idea please share.
I can see when I refresh the page "ng-pristine ng-valid" classes are added in my second form.
This is my first form
<div class="address address-form" ng-hide="!isEdit">
<form class="edit-address-form" ng-submit="updateAddress(currentAddress.aid);">
<div class="form-group">
<label class="sr-only" for="first_name">First name </label>
<input type="text" class="form-control" id="first_name" value="testing" name="first_name" value="{{currentAddress.first_name}}" placeholder="First name" required ng-model="currentAddress.first_name">
</div>
<div class="form-group">
<label class="sr-only" for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name" ng-model="currentAddress.last_name" >
</div>
<div class="form-group">
<label class="sr-only" for="phone">Phone/mobile</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" ng-model="currentAddress.phone">
</div>
<div class="form-group">
<label class="sr-only" for="street">Street address</label>
<input type="text" class="form-control" id="street" name="street" placeholder="Street address" ng-model="currentAddress.street">
</div>
<div class="form-group">
<label class="sr-only" for="city">City</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City" ng-model="currentAddress.city" >
</div>
<div class="form-group">
<label class="sr-only" for="postal_code">Postal code</label>
<input type="text" class="form-control" id="postal_code" name="postal_code" placeholder="Postal code" ng-model="currentAddress.postal_code" >
</div>
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="Country" autofocus ng-model="currentAddress.country">
</div>
<div class="form-group">
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<div class="alert alert-success" role="alert" ng-show="successMsg">{{successMsg}}</div>
<button type="submit" class="btn btn-lg btn-primary btn-block" id="button-update-address" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Updating address...">Update address</button>
</div>
</form>
</div>
This one second form
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Payment Summary</h3>
</div>
<div class=" ">
<form id="confirm-order" name="confirm_order" method="POST" action="">
<div class="form-group">
<?php
if($con->returned_rows):
$row = $con->fetch_assoc();
?>
<table class="table">
<tr>
<td> Sub total </td>
<td><?php print $row['subtotal'] ;?><input type="hidden" name="subtotal" value="<?php print $row['subtotal'] ;?>"/></td>
</tr>
<tr>
<td>Total items </td>
<td><?php print $row['total_qty'] ;?></td>
</tr>
<tr>
<td>Shipping</td>
<td><?php //print $row['total_qty'] ;?></td>
</tr>
</table>
<?php endif; ?>
</div>
<div class="form-group">
<input type="submit" name="confirm" class="btn btn-lg btn-primary btn-block" value="Confirm order"/>
</div>
</form>
</div>
angular has directive named form, because of which it considers your form directive in angular-scope.
if you want this directive to be out of angular-scope, use ngNonBindable
<form ng-non-bindable>
.....
</form>
I am sure I am missing something fairly simple here. Yet, still having hard time figuring it out.
I am trying to execute the findItem function when a value for the url input changes. With the code below, I get this warning in Chrome:
Warning: Failed propType: Invalid prop `onChange` of type `string` supplied to `ReactDOMInput`, expected `function`. Check the render method of `ItemForm`.
Here is the related code:
ItemForm = React.createClass({
findItem(event) {
console.log(event.target.value);
},
render() {
return (
<tfoot>
<tr className="ui form">
<td>
<div className="field">
<label>Product URL</label>
<div className="ui active small inline invisible loader"/>
<input className="url" onChange="{this.findItem}" placeholder="Enter the URL of the product you wish to purchase" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Quantity</label>
<input className="qty" disabled="disabled" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Total Cost</label>
<div className="ui labeled input">
<div className="ui label">$</div>
<input disabled="disabled" type="text"/>
</div>
</div>
</td>
</tr>
<tr className="ui form">
<td>
<div className="fields">
<div className="eight wide field title">
<label>Product Title</label>
<textarea disabled="disabled" rows="2"/>
</div>
<div className="eight wide field">
<label>Optional Comments</label>
<textarea disabled="disabled" rows="2"/>
</div>
</div>
</td>
<td/>
<td className="btn">
<button className="ui disabled positive button">Add</button>
</td>
</tr>
</tfoot>
);
}
});
you need to remove the quotation marks
onChange={this.findItem}
Working on my first small AngularJS App I'm facing problems with a form submit. I worked trough the CodeSchool course and figured the most out by myself, but this form submit thingy... well I just don't get where I'm wrong so that's why it would be nice if you could show me the right solution, so I can go on.
Project: A simple Workout List where you can list all the training sessions you had. This is my HTML, Element 3 is the problem:
<header class="wob-masthead container-fluid">
<div class="row">
<div class="col-md-6" ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1 }"><a href ng-click="tab = 1">Overview</a></li>
<li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Stats</a></li>
<li ng-class="{ active:tab === 3 }"><a href ng-click="tab = 3">New</a></li>
</ul>
</div>
<div class="col-md-6">
<form class="navbar-form pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
</div>
</header>
<section class="wob-main mainlist container" id="headjump">
<!--- ==========================================
Element 1: Overview
============================================= -->
<div class="subsite" ng-show="tab === 1">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>WorkoutBuddy</h1>
<div class="table-responsive" ng-controller="ListController as listing">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">Date</th>
<th class="col-md-8">Type</th>
<th class="col-md-1">Repeat</th>
<th class="col-md-1">Time</th>
</tr>
</thead>
<tbody ng-controller="ListController as listing">
<tr ng-repeat="wo in listing.sessions">
<td>{{wo.date | date:'dd/MM/yyyy'}} </td>
<td>{{wo.name}}</td>
<td>{{wo.repeat}}</td>
<td>{{wo.time}} Minutes</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--- ==========================================
Element 2: Stats
============================================= -->
<div class="subsite" ng-show="tab === 2">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>Stats</h1>
<!-- Ende Subsite -->
</div>
<!--- ==========================================
Element 3: New
============================================= -->
<div class="subsite" ng-show="tab === 3">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>New</h1>
<div class="table-responsive" ng-controller="ListController as listing">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">Date</th>
<th class="col-md-8">Type</th>
<th class="col-md-1">Repeat</th>
<th class="col-md-1">Time</th>
</tr>
</thead>
<tbody ng-controller="ListController as listing">
<tr ng-repeat="wo in listing.sessions | limitTo:2">
<td>{{wo.date | date:'dd/MM/yyyy'}} </td>
<td>{{wo.name}}</td>
<td>{{wo.repeat}}</td>
<td>{{wo.time}} minutes</td>
</tr>
</tbody>
</table>
</div>
<form name="WorkoutForm" ng-controller="EntryController as entryCtrl">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{entryCtrl.wo.name}}</strong><br>
<small>am: {{entryCtrl.wo.date}}</small><br>
{{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
<input ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
<input ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
<input ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
<input type="submit" value="Add" />
</form>
<!-- Ende Subsite -->
</div>
</section>
I styled it with Bootstrap and this is my app.js:
(function(){
var app = angular.module('wobuddy', [ ]);
app.controller('ListController', function(){
this.sessions = wos;
});
var wos = [
{
name: 'Squat',
date: '01.01.2015',
repeat: 50,
time: 10
},
{
name: 'Push Ups',
date: '01.01.2015',
repeat: 50,
time: 10
}
];
})();
Switching between the sections using the nav works pretty fine and also printing out the data-elements in the table, but when I push submit nothing happens - really hope you can help me to learn :-)
You need to make an EntryController that will add a new object to the end of the wos collection. Something like this:
app.controller('EntryController', function($scope) {
$scope.wo = {};
$scope.submit = function() {
wos.push($scope.wo);
$scope.wo = {}; // Clear the form fields
};
});
Then your HTML for that section could look something like this:
<form name="WorkoutForm" ng-controller="EntryController">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{wo.name}}</strong><br>
<small>am: {{wo.date}}</small><br>
{{wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input ng-model="wo.date" type="date" placeholder="date" />
<input ng-model="wo.name" type="name" placeholder="name" />
<input ng-model="wo.repeat" type="repeat" placeholder="repeat" />
<input ng-model="wo.time" type="time" placeholder="time" />
<button ng-click="submit()">Add</button>
</form>
Notice that it's more usual for a controller to communicate data to the template via the $scope object rather than via the controller object itself.
By looking at you form HTML, I think you missed the name attribute inside your form and also ng-submit directive is missing which will gets called after a submit form. Do check form validation inside controller using $valid() method and perform post else give alert to user.
HTML
<form name="workoutForm" ng-controller="ReviewController as reviewCtrl" ng-submit="submit(workoutForm, entryCtrl.wo)">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{entryCtrl.wo.name}}</strong>
<br>
<small>am: {{entryCtrl.wo.date}}</small>
<br> {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input name="date" ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
<input name="name" ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
<input name="repeat" ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
<input name="time" ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
<input type="submit" value="Add" />
</form>
Controller
$scope.submit = function(workoutForm, item){
if(workoutForm.$valid)
//then make $http.post by sending item values
else
//show error
};
UPDATE
<html ng-app='demoApp'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<form ng-controller="validationCtrl">
<input type="text" placeholder="Name...." ng-model="user.name"/>
<input type="text" placeholder="Password...." ng-model="user.pass"/>
<input type="text" placeholder="Mobile...." ng-model="user.mo"/>
<input type="submit" ng-click="alldata(user)"/>
</form>
<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
$scope.alldata=function(user)
{
alert(JSON.stringify(user));
}
});
</script>
</body>
</html>
You can also use this method, and
Your form shoud be like
<form method="post" name="sentMessage" id="my_contact" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Name</label>
<input class="form-control" id="name" type="text" name="name" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Email Address</label>
<input class="form-control" id="email" type="email" name="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Phone Number</label>
<input class="form-control" id="phone" type="tel" name="phone" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Message</label>
<textarea class="form-control" id="message" rows="5" name="Message" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
Send
</div>
</form
import jquery as below
npm install jquery using CLI
import * as $ from 'jquery';
send_query() function will be
send_query() {
var data = $("#my_contact").serializeArray();
var indxarr = {};
$.each(data,function(i,v){
indxarr[v['name']] = v['value'];
});
data = JSON.parse(JSON.stringify(indxarr))
//POST YOUR DATA
this.httpClient.post('http://localhost/rajat/ajax/contact_query_submit/', data,httpOptions)
.subscribe(data => {
console.log(data);
});
}
Your backend code will be
public function contact_query_submit(){
if ($this->input->post()) {
$postdata = file_get_contents("php://input");
$_POST = json_decode($postdata,TRUE);
$addArr = array(
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'phone' => $this->input->post('phone'),
'message' => $this->input->post('message'),
'created' => time()
);
if($this->main_model->create('rjt_contact', $addArr)){
$arr[] = array('type' => 'success', 'msg' => '<p>Your query has been received. <br>We will get back to you soon.</p>');
echo json_encode($arr);
}else{
$arr[] = array('type' => 'warning', 'msg' => '<p>'.$this->db->last_query().'</p>');
echo json_encode($arr);
}
}else{
$arr[] = array('type' => 'warning', 'msg' => '<p>No data post yet</p>');
echo json_encode($arr);
}
}