I want to validate name field in this code..
<script type="text/ng-template" id="add.html">
<div class="modal-header">
<h3 class="modal-title">ADD</h3>
</div>
<div class="modal-body">
<table class="add-table">
<form name="myForm">
<tr>
<div class="form-group">
<td>
<label>name:</label>
</td>
<td>
<input type="text" name="name" ng-model="user.name"
placeholder="Name" required=""></input>
<span class="error" ng-show="myForm.name.$dirty">Required</span>
</td>
</div>
</tr>
</form>
</table>
</div>
</script>
The expression myForm.name.$dirty does not evaluate and return any value.
What am I doing wrong here?
Try moving your <table> inside the <form>.
Also try using
$invalid instead of $dirty.
Related
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 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!
I have made simple example: http://codepen.io/anon/pen/VLpYJm?editors=101
In this example I need to get field.type and using it with ng-switch.
<div ng-app="app">
<table ng-controller="tableController">
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
<td>
<select ng-model="item" ng-options="field.label for field in fields track by field.name" required="required" />
</td>
<td>
<div ng-switch on="item.type">
<div ng-switch-when="BOOLEAN">
<input ng-model="item.value" type="checkbox" />
</div>
<div ng-switch-default>
<input ng-model="item.value" type="text" class="form-control" required="">
</div>
</div>
</td>
<td>{{selected}}</td>
</tr>
</table>
</div>
I'm following a tutorial on AngularJS, now I'm stuck, I don't know what I'm doing wrong.
<div ng-app="myApplication" ng-controller="ex13Controller">
<form name="mijnFormulier" novalidate>
<table>
<tr>
<td>Naam:</td>
<td><input value="" ng-model="user.naam" name="naam" />
<td><span style="color: red" ng-show="mijnFormulier.naam.$dirty && mijnFormulier.naam.$invalid" ><span ng-show="mijnFormulier.naam.$error.required">Moet ingevuld worden</span></span></td>
</tr>
</table>
</form>
</div>
Angular shows the mijnFormulier.naam.$dirty state good, (tested when leaving the $invalid and the $error.required). When It comes to the validation, Angular doesn't react.
You need add attribute required to input tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="mijnFormulier" novalidate>
<table>
<tr>
<td>Naam:</td>
<td><input value="" ng-model="user.naam" name="naam" required />
<td><span style="color: red" ng-show="mijnFormulier.naam.$dirty && mijnFormulier.naam.$invalid" ><span ng-show="mijnFormulier.naam.$error.required">Moet ingevuld worden</span></span></td>
</tr>
</table>
</form>
</div>
I forgot about the required tag in the inputs. -.-
<input value="" ng-model="user.naam" name="naam" required/>
Like this.
I have a form that is inserted via ng-include, but it doesn't work. If I manually paste in the html template from the ng-include src (instead of using ng-include), then it works fine. Is there something about ng-include that disables forms?
<div ng-include src="'views/login_form.html'"></div>
login_form.html:
<form ng-submit="loginUser()">
<table>
<tr>
<td class="login_input_field v_align_top">
<input type="text" name="email" ng-model="email">
</td>
<td class="login_input_field">
<input type="password" name="pass" ng-model="password">
</td>
<td class="login_button_container">
<button type="submit" id="login" name="login">Login</button>
</td>
</tr>
</table>
</form>
What am I missing?
Try breaking out the loginUser() into its own subcontroller.
That way your function will be in the same $scope.
<div ng-controller="LoginUserController">
<div ng-include src="'views/login_form.html'"></div>
</div>