here is the angular code.
.controller("myStuList", ['$scope', "weejoinMessage", "httpServer", "$modal", "ngWeeJoinServer", "stuServer", function ($scope, weejoinMessage, httpServer, $modal, server, stuServer) {
//第一次进入是加载所有学员数据
$scope.stuinfos = infos.info; // i give the data form info.info to stuinfos.
//
$scope.course = '';
$scope.class = '';
$scope.name = '';
$scope.age = '';
$scope.scores = '';
$scope.createNew = function () {
httpServer.httpHandle({
url: stuBag.action.createNew,
data: {
courseId: $scope.course,
classId:$scope.class,
stuname: $scope.name,
age: $scope.age,
scores: $scope.scores
},
success: function (data) {
weejoinMessage.messageSuccess("添加成功！");
$scope.stuinfos.push({ 'CourseName': $scope.course, 'ClassName': $scope.class, 'StuName': $scope.name, 'Age': $scope.age, 'Scores': $scope.scores });
}
});
};
please help to see the problem. all the validation message show up togather when open the create page.
look down the html code .i want to show the validation message when click on the input text. and when the input message is wrong according to the validation . and show the message below the input texbox.
<div ng-app="stu.info" ng-controller="myStuList">
<form name="createnew_form" class="form-horizontal" role="form" ng-submit="createNew()" novalidate>
<div class="form-group">
<label for="stuname" class="col-md-2 control-label">姓名</label>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="姓名" name="stuname" ng-model="name" ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="createnew_form.stuname.$dirty && createnew_form.stuname.$invalid">
<small class="error" ng-show="createnew_form.stuname.$error.required">
请输入姓名
</small>
<small class="error" ng-show="createnew_form.stuname.$error.minlength">
至少输入两个字
</small>
<small class="error" ng-show="createnew_form.stuname.$error.maxlength">
最多输入五个字
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年龄</label>
<div class="col-md-4">
<input type="number" min="0" max="100" required class="form-control" name="age"
ng-model="age" />
<div class="error-container" ng-show="createnew_form.age.$dirty && createnew_form.age.$invalid">
<small class="error" ng-show="createnew_form.age.$error.required">
请输入年龄
</small>
<small class="error" ng-show="createnew_form.age.$error.min">
最小年龄为0
</small>
<small class="error" ng-show="createnew_form.age.$error.max">
最大年龄为100
</small>
</div>
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="确认添加" class="btn btn-primary" />
</div>
</div>
</form>
</div>
I have used your code on jsFiddle and the form validation is working as expected.
I'm not seeing all the error messages together as you've mentioned. Please see the fiddle here: http://jsfiddle.net/giri_jeedigunta/4508cd4r/
Your HTML Code:
<div ng-app="stu.info" ng-controller="myStuList">
<form name="createnew_form" class="form-horizontal" role="form" ng-submit="createNew()" novalidate>
<div class="form-group">
<label for="stuname" class="col-md-2 control-label">姓名</label>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="姓名" name="stuname" ng-model="name" ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="createnew_form.stuname.$dirty && createnew_form.stuname.$invalid">
<small class="error" ng-show="createnew_form.stuname.$error.required">
请输入姓名
</small>
<small class="error" ng-show="createnew_form.stuname.$error.minlength">
至少输入两个字
</small>
<small class="error" ng-show="createnew_form.stuname.$error.maxlength">
最多输入五个字
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年龄</label>
<div class="col-md-4">
<input type="number" min="0" max="100" required class="form-control" name="age"
ng-model="age" />
<div class="error-container" ng-show="createnew_form.age.$dirty && createnew_form.age.$invalid">
<small class="error" ng-show="createnew_form.age.$error.required">
请输入年龄
</small>
<small class="error" ng-show="createnew_form.age.$error.min">
最小年龄为0
</small>
<small class="error" ng-show="createnew_form.age.$error.max">
最大年龄为100
</small>
</div>
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="确认添加" class="btn btn-primary" />
</div>
</div>
</form>
</div>
Shouldn't creatnew_form.course.$invalid be createnew_form.course.$invalid (with an 'e' in "createnew")?
Related
I have implemented validation system in forms and it working fine.
Here is my form:
<form name='addContactForm'>
<div class="form-group">
<label for="userid">USER ID :</label><br>
<input ng-model="formModel.userid" class="form-control" name="userid" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.userid.$dirty && addContactForm.userid.$invalid">
<span ng-show="addContactForm.userid.$error.required"> User is required.</span>
<span ng-show="addContactForm.userid.$error.number">Invalid userID</span>
</div>
<div class="form-group">
<label for="name">NAME :</label><br>
<input ng-model="formModel.name" class="form-control" name="name" required/>
<span style="color:red" ng-show="addContactForm.name.$dirty && addContactForm.name.$invalid">
<span ng-show="addContactForm.name.$error.required"> Name is required.</span>
<span ng-show="addContactForm.name.$error.lettersOnly">Invalid Name</span>
</span>
</div>
<div class="form-group">
<label for="email">Email :</label> <br>
<input type="email" name="email" class="form-control" ng-model="formModel.email" ng-pattern="/[\w\d\.\_]+\#[\w\d]+\.[\w]{3}/" required>
<span style="color:red" ng-show="addContactForm.email.$dirty && addContactForm.email.$invalid">
<span ng-show="addContactForm.email.$error.required">Email is required.</span>
<span ng-show="addContactForm.email.$error.pattern">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<label for="phone">Phone :</label> <br>
<input ng-model="formModel.phone" class="form-control" name="phone" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.phone.$dirty && addContactForm.phone.$invalid">
<span ng-show="addContactForm.phone.$error.required"> Phone Number is required.</span>
</span>
</div>
<div class="row justify-content-center">
<button class="btn btn-primary" ng-disabled="addContactForm.$invalid" ng-click="PassDataToDisplyThroughUrl()">Submit</button> <br>
</div>
</form>
</div>
Note that, above things are working fine.
my controller is below:
app.controller('formCtrl', ['$scope', '$location', '$http',
function($scope, $location, $http) {
$scope.formModel = {};
$scope.PassDataToDisplyThroughUrl = function() {
var url = 'display/' + $scope.formModel.userid + '/' + $scope.formModel.name
+ '/' + $scope.formModel.email + '/' + $scope.formModel.phone;
$location.path(url);
$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
.then(function(response){
$scope.successCallBack = 'You have successfully saved your contact';
}, function(response){
$scope.errorCallBack = 'Opps! Unable to save your data, please check your network';
});
$scope.formModel = {};
$scope.addContactForm.$setPristine();
};
}]);
After i clicking on submit button -- it clear the form and send to the server. but the problem is, it shows me the validation error later
Can anyone fix me this issue?
this is my input
aby-saturn#gmail.com
hyphen is not working in emailid getting invalid email id
this is my ng-pattern
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="email" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" noncapitalize required />
</div>
<div style="color: red" id="emailError"></div>
<span style="color:red;" class="email-error" ng-show="loginForm.submitted && loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.submitted && loginForm.email.$error.pattern">Email not valid</span>
</div>
Here is a regexp for email validation.
^[\w-]+(\.[\w-]+)*#([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$
You can test this regexp here
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="text" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[\w-]+(\.[\w-]+)*#([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/" noncapitalize required />
</div>
<div style="color: red" id="emailError"></div>
<span style="color:red;" class="email-error" ng-show="myForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="myForm.email.$error.pattern">Email not valid</span>
</div>
</form>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
I guess you don't want to allow '-' to be in the email address, here is what I got using ng-pattern and if you want '-' to be allowed check 2nd example:
1) If '-' is not allowed:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.user = {
email: 'test#test.com'
};
$scope.emailPattern = /^(([^-<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="loginForm">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
</div>
<div style="color: red" id="emailError">
<span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
</div>
</div>
</form>
</div>
2) If '-' is allowed:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.user = {
email: 'test#test.com'
};
$scope.emailPattern = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="loginForm">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
</div>
<div style="color: red" id="emailError">
<span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
</div>
</div>
</form>
</div>
I am unable to get automatic radio button checked when I edit the User From using following Html and AngularJs Code. When I console {{changeUser}} this returns following data
{"id":1,"username":"Ramesh","password":"Ramesh1#23","role":"admin","active":"no"}. When I load the edit form I have to automatically checked the no radio button in the following code.
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal form-bordered" name="editUserForm" data-ng-submit="userEdit(changeUser)">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username*</label>
<div class="col-md-4">
<input class="form-control" type="text" name="userName" data-ng-model="changeUser.username" value="{{ changeUser.username }}" data-ng-pattern="/^[a-z0-9_ .-]{5,15}$/i" required />
<span style="color:red" class="error" data-ng-show="editUserForm.userName.$error.pattern" >Only letters, integers, and underscores.Minimum 5 characters to maximum 15 characters.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password*</label>
<div class="col-md-4">
<input class="form-control" type="password" name="changePassword" data-ng-model="changeUser.password" value="{{ changeUser.password}}" data-ng-pattern="usersPattern.password" required />
<span style="color:red" class="error" data-ng-show="editUserForm.changePassword.$error.pattern">Minimum of 8 characters, 1 capital letter,1 lowercase, 1 special-case and 1 numeric.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn purple" data-ng-disabled= "editUserForm.$invalid">
<i class="fa fa-check"></i> Edit</button>
<button type="button" class="btn red" data-ng-click="cancelEdit()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
The Controller is
(function (){
"use strict";
function UsersEditController($scope, UserFactory, $http, $location) {
$scope.$on('$viewContentLoaded', function () {
App.initAjax(); // initialize core components
});
$scope.changeUser = {};
$scope.changeUser = UserFactory.get();
$scope.userEdit = function(data) {
$scope.changeUser = data;
console.log($scope.changeUser);
};
$scope.usersPattern = {
password: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%]).{8,20})'
};
$scope.cancelEdit = function() {
$location.path('users');
};
}
UsersEditController.$inject = ['$scope', 'UserFactory', '$http', '$location'];
angular.module('books').controller('UsersEditController', UsersEditController);
})()
And I guess this is your answer (even without js code provided :) )
https://stackoverflow.com/a/18446612/552194
You need to add ng-value and use it instead of the standard value
I have a form with angular-wizard steps like below
While moving from one step to another step, we have to validate the current
step fields. But it validating all steps fields. How we can validate the present step fields instead of all fields?
<form name="User" novalidate>
<wizard on-finish="saveUser()">
<wz-step title="Starting" canexit="exitValidation">
<h1>This is the first step</h1>
<input type="text" required name="Field1"/>
<input type="submit" wz-next="" value="Continue" />
</wz-step>
<wz-step title="Continuing" canenter="enterValidation" canexit="exitValidation">
<h1>This is the second step</h1>
<input type="text" required name="Field2"/>
<input type="submit" wz-next="" value="Continue" />
</wz-step>
<wz-step title="Continuing" canenter="enterValidation" canexit="exitValidation">
<h1>This is the third step</h1>
<input type="text" required name="Field3"/>
<input type="submit" wz-next="" value="Continue" />
</wz-step>
</wizard>
</form>
You can use nested formGroups to validate the current step fields instead of all fields. I am adding the sample code using angular-archwizard with step wise validation.
Component.html :
<form [formGroup]="userForm" (ngSubmit)="userFormSubmit()">
<aw-wizard [navBarLayout]="'large-empty-symbols'">
<!-- Step 1 -->
<aw-wizard-step formGroupName="personalDetailsGroup" stepTitle="Personal Info" [navigationSymbol]="{ symbol: '1', fontFamily: 'FontAwesome' }">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="first_name">First Name* :</label>
<input type="text" class="form-control" formControlName="first_name">
<div *ngIf="form.personalDetailsGroup['controls'].first_name.invalid && (form.personalDetailsGroup['controls'].first_name.dirty || form.personalDetailsGroup['controls'].first_name.touched)">
<span *ngIf="form.personalDetailsGroup['controls'].first_name.errors.required">Please enter first name</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="last_name">Last Name* :</label>
<input type="text" class="form-control" formControlName="last_name">
<div *ngIf="form.personalDetailsGroup['controls'].last_name.invalid && (form.personalDetailsGroup['controls'].last_name.dirty || form.personalDetailsGroup['controls'].last_name.touched)">
<span *ngIf="form.personalDetailsGroup['controls'].last_name.errors.required">Please enter last name</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="email">Email Address* :</label>
<input type="email" class="form-control" formControlName="email" required>
<div *ngIf="form.personalDetailsGroup['controls'].email.invalid && (form.personalDetailsGroup['controls'].email.dirty || form.personalDetailsGroup['controls'].email.touched)">
<span *ngIf="form.personalDetailsGroup['controls'].email.errors.required">Please enter email address</span>
<span *ngIf="form.personalDetailsGroup['controls'].email.errors.email">Please enter valid email address</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="mobile_number">Mobile Number* :</label>
<input type="tel" class="form-control" formControlName="mobile_number" required>
<div *ngIf="form.personalDetailsGroup['controls'].mobile_number.invalid && (form.personalDetailsGroup['controls'].mobile_number.dirty || form.personalDetailsGroup['controls'].mobile_number.touched)">
<span *ngIf="form.personalDetailsGroup['controls'].mobile_number.errors.required">Please enter mobile number</span>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="button" [disabled]="form.personalDetailsGroup.invalid" awNextStep>Next</button>
</aw-wizard-step>
<!-- Step 2 -->
<aw-wizard-step formGroupName="contactDetailsGroup" stepTitle="Contact Info">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="phone_number">Phone Number :</label>
<input type="tel" class="form-control" formControlName="phone_number">
<div *ngIf="form.contactDetailsGroup['controls'].phone_number.invalid && (form.contactDetailsGroup['controls'].phone_number.dirty || form.contactDetailsGroup['controls'].phone_number.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].phone_number.errors.pattern">Please enter valid phone number</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="city">City* :</label>
<input type="text" class="form-control" formControlName="city" required>
<div *ngIf="form.contactDetailsGroup['controls'].city.invalid && (form.contactDetailsGroup['controls'].city.dirty || form.contactDetailsGroup['controls'].city.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].city.errors.required">Please enter city name</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="state">State* :</label>
<input type="text" class="form-control" formControlName="state" required>
<div *ngIf="form.contactDetailsGroup['controls'].state.invalid && (form.contactDetailsGroup['controls'].state.dirty || form.contactDetailsGroup['controls'].state.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].state.errors.required">Please enter state name</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="country">Country* :</label>
<input type="text" class="form-control" formControlName="country" required>
<div *ngIf="form.contactDetailsGroup['controls'].country.invalid && (form.contactDetailsGroup['controls'].country.dirty || form.contactDetailsGroup['controls'].country.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].country.errors.pattern">Please enter country name</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="pincode">Pincode* :</label>
<input type="tel" class="form-control" formControlName="pincode" required>
<div *ngIf="form.contactDetailsGroup['controls'].pincode.invalid && (form.contactDetailsGroup['controls'].pincode.dirty || form.contactDetailsGroup['controls'].pincode.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].pincode.errors.required">Please enter pincode</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="address1">Address1* :</label>
<textarea class="form-control" formControlName="address1" required></textarea>
<div *ngIf="form.contactDetailsGroup['controls'].address1.invalid && (form.contactDetailsGroup['controls'].address1.dirty || form.contactDetailsGroup['controls'].address1.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].address1.errors.required">Please enter address</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="address2">Address2* :</label>
<textarea class="form-control" formControlName="address2" required></textarea>
<div *ngIf="form.contactDetailsGroup['controls'].address2.invalid && (form.contactDetailsGroup['controls'].address2.dirty || form.contactDetailsGroup['controls'].address2.touched)">
<span *ngIf="form.contactDetailsGroup['controls'].address2.errors.required">Please enter address</span>
</div>
</div>
</div>
</div>
<button class="btn btn-secondary" type="button" awPreviousStep>Previous</button>
<button class="btn btn-primary" type="button" [disabled]="form.contactDetailsGroup.invalid" awNextStep>Next</button>
</aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 3">
Content of Step 3
<button class="btn btn-secondary" type="button" awPreviousStep>Previous</button>
<button class="btn btn-primary" type="submit" [disabled]="form.personalDetailsGroup.invalid || form.contactDetailsGroup.invalid">Submit</button>
</aw-wizard-step>
</aw-wizard>
</form>
Component.ts :
Add these below lines of code to define the nested formGroups.
ngOnInit(): void {
this.userForm = this.formBuilder.group({
personalDetailsGroup: this.formBuilder.group({
first_name: ['', [Validators.required]],
last_name: ['', [Validators.required]],
email: ['', [Validators.required, Validators.email]],
mobile_number: ['', [Validators.required, Validators.pattern(mobileRegx)]],
}),
contactDetailsGroup: this.formBuilder.group({
city: ['', [Validators.required]],
state: ['', [Validators.required]],
country: ['', [Validators.required]],
pincode: ['', [Validators.required]],
address1: ['', [Validators.required]],
address2: ['', [Validators.required]],
})
})
}
get form() { return this.userForm.controls; }
userFormSubmit(){
const personalDetails = this.addVendorForm.get('personalDetailsGroup').value;
const contactDetails = this.addVendorForm.get('contactDetailsGroup').value;
const totalFormData = Object.assign({}, personalDetails, contactDetails);
}
hope this answer helps you.
I have the following form :
UPDATE
<script type="text/ng-template" id="form-profile.html">
<form id="f1" name="form">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" ng-class="submitted ? 'ng-dirty' : ' ' " required autofocus>
<span style="color:red" ng-show="form.name.$dirty || form.name.$invalid">Name is required</span>
</div>
<div class="form-group">
<label for="name">E-mail</label>
<input type="text" class="form-control" name="email" ng-model="formData.email" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
<span style="color:red" ng-show="f1.email.$dirty && f1.email.$invalid">
<span ng-show="f1.email.$error.required">Email is required.</span>
</span>
</div>
<div class="form-group">
<label for="Cellphone">Mobil nr.</label>
<input type="text" class="form-control" name="Cellphone" ng-model="formData.Cellphone" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
<span style="color:red" ng-show="f1.Cellphone.$dirty && f1.Cellphone.$invalid">
<span ng-show="f1.Cellphone.$error.required">Cellphone is required.</span>
</span>
</div>
<div class="form-group">
<label for="address">Adresse</label>
<input type="text" class="form-control" name="address" ng-model="formData.address">
</div>
<div class="form-group col col-33 col-offset-67">
<a ui-sref="front.form.organisation" class="button icon-right ion-chevron-right button-energized .col-offset-50">
Next
</a>
</div>
</form>
</script>
When I press next I want the form to disable the next button and show me the errors.
I have tried with name so far and I did not get the errors.
Thank you
Please see demo below
ng-show="f1.name.$dirty <-- f1 that's form name not id
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<form name="f1">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" required autofocus>
<span style="color:red" ng-show="f1.name.$dirty && f1.name.$invalid">Name is required</span>
</div>
</form>
</div>