I have the following:
<form name="ctrl.form" class="form-horizontal" ng-class="{true: 'has-error'}[submitted && form.email.$invalid]"
novalidate>
<div class="form-group" ng-class="{'has-error' : ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid}">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputName" name="inputName" ng-model="ctrl.app.name"
placeholder="Enter stack name" ng-disabled="ctrl.editMode" ng-required='true'
ng-minlength='3' ng-maxlength='32' required/>
</div>
<span ng-show="ctrl.form.inputName.$error.required && !ctrl.form.inputName.$pristine" class="help-block">Name is required</span>
<span ng-show="ctrl.form.inputName.$error.minlength" class="help-block">Name is too short</span>
<span ng-show="ctrl.form.inputName.$error.maxlength" class="help-block">Name is too long</span>
<span ng-show="ctrl.form.inputName.$error.pattern" class="help-block">Name has invalid characters</span>
</div>
<div class="form-group" ng-class="{'has-error' : ctrl.hasServerErrors}">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.isCreating"
ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' :
ctrl.isCreating? 'Creating': 'Create'}}
</button>
<span ng-show="ctrl.hasServerErrors" class="help-block"
ng-repeat="serverError in ctrl.serverErrors">
{{serverError}}
</span>
</div>
</div>
<div class="alert alert-success" ng-show="ctrl.showUpdateSuccessAlert">
<strong>Successfully updated!</strong>
</div>
</form>
Now, the problem is, even though I have added the required tag to name, still when I click the submit button, the call goes to the backend service without showing that name is mandatory and has to be supplied.
What am I missing in this? Thanks!
<div class="" ng-show="ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid">
Message which you want to print.
</div>
Add this.
Hope this will help you.
You should check if the form is valid before submitting the form.
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.form.$invalid"
ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' :
ctrl.isCreating? 'Creating': 'Create'}}
</button>
$invalid will be true, when the form is not valid.
Related
I am trying to validat my form and i done it but the problem is when i click the button without entering any input value it is getting saved and i dont want to disable the button.I need a condition that if i click on submit it should show the fields error that are empty.Can anyone please suggest help.
<div class="loginformcss nopadding">
<form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="col_full">
<input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="form-control not-dark">
<span *ngIf="form.controls['firstname'].touched">
<span *ngIf="!form.controls['firstname'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full">
<input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark">
<span *ngIf="form.controls['lastname'].touched" >
<span *ngIf="!form.controls['lastname'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full">
<input type="text" [formControl]="form.controls['profilename']" id="login-form-username" name="login-form-username" value="" placeholder="User Name" class="form-control not-dark">
<span *ngIf="form.controls['profilename'].touched" >
<span *ngIf="!form.controls['profilename'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full nobottommargin">
<button class="col-xs-12 button button-small button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login" >Login</button>
</div>
<div class="clear"></div>
The easiest way is to add required attribute to your input
<div>
<form class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false"
(ngSubmit)="submitForm()">
<fieldset>
<div class="form-group row">
<label class="form-control-label col-md-3 col-xs-12" for="task-id">
ID
<span class="help-block">
Number Only
</span>
</label>
<div class="col-md-9 col-xs-12">
<input type="text" id="task-id" name="task-id" class="form-control"
data-parsley-type="number"
required="required">
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" id="task-detail-submit-button" class="btn btn-danger btn-rounded pull-xs-right">Submit</button>
</div>
</form>
</div>
How can the Parsley stop invoking "submitForm()" during form submission when the input is invalid. In this case, "task-id" is not a number.
hope this code give you a idea
<form class="form-horizontal form-label-left parsleyjs" name="formname" method="post" data-parsley-priority-enabled="false"
(ngSubmit)="formname.valid && formname.submitForm()">
This code is not tested if it does not work sorry for it
I recently have a problem with ng message in angular. I tried to use it as validator however noticed that something don't work the way I want. I want the ctrl.login() function run when the user provide both password and username. Unfortunately right now it is enough to provide just one of this to and the function will trigger. How can I fix this?
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT: For clarification. Thx for pointing out the button disable feature but it is not the point of my question. The issue is that the ctrl.login function will be triggered (in other words the form will be submited) despite only 1 out of 2 required input have been filled. I expect that the ngMessage will make it impossible to submit the form if username OR password will be empty. The disable feature on the submit button is just a quick hotfix that i want to remove in the future.
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT2: Just if case anyone is wondering. I solved the problem. Thx for help and contribution :)
You just need to replace && to || in :
data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"
You should change the data-ng-disabled condition to 'authorizationForm.password.$invalid || authorizationForm.username.$invalid'. Right now as long as one of the two is valid (but not necessarily both), the user can click submit.
I don't understand and have done lot of research to no avail. After I hit submit button, my form state changes back to $valid = false. This causes the input controls to go RED. How do I fix this. Here is my code.
<form class="form-horizontal" role="form" name="testMessageForm" novalidate>
<div class="form-group"
data-ng-class="{'has-error':testMessageForm.PhoneNumber.$invalid && testMessageForm.PhoneNumber.$dirty}">
<label class="col-sm-3 control-label" for="Phone">Cell Number</label>
<div class="col-sm-9">
<input required
placeholder="nnn-nnn-nnnn"
ng-pattern="/^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/"
minlength="10"
maxlength="14"
data-ng-model="reminderTest.PhoneNumber"
id="PhoneNumber"
name="PhoneNumber"
class="form-control" />
<span class="help-block has-error">
<span ng-show="testMessageForm.PhoneNumber.$error.required">
required
</span>
<span ng-show="testMessageForm.PhoneNumber.$error.minlength">
At least 10 digits.
</span>
<span ng-show="testMessageForm.PhoneNumber.$error.maxlength">
Why so many characters. Double check.
</span>
<span ng-show="testMessageForm.PhoneNumber.$error.pattern">
Wrong Phone number pattern.
</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="Email"></label>
<div class="col-sm-9">
<button class=" btn btn-success"
type="submit" value="Test"
data-ng-disabled="testMessageForm.$invalid"
data-ng-click="submitTestReminderForm()">
Test Reminder Now
</button>
</div>
</div>
<div data-ng-show="loading == true">
<div class="spinner">
Loading...
</div>
</div>
<div class="alert alert-success" data-ng-show="successMsg.length > 0">
×
<strong>Great! </strong> {{successMsg}}
</div>
<div class="alert alert-danger" data-ng-show="errorMsg.length > 0">
×
<strong>oops! </strong> {{errorMsg}}
</div>
</form>
Controller code.
$scope.submitTestReminderForm = function () {
reminderService.insertTestReminder($scope.reminderTest).then(onReminderTestComplete, onReminderErrorTest);
};
Service code
var insertTestReminder = function (reminderTest) {
return $http.post("/api/ReminderTest", reminderTest);
};
<form class="stdform stdform2" name="projectForm" ng-submit="saveProject(project, projectForm)"
novalidate="novalidate">
<p>
<div class="par control-group" ng-class="{'has-error': projectForm.projectName.$invalid && (projectForm.projectName.$dirty || submitted)}">
<label class="control-label" for="projectname">Name</label>
<div class="controls">
<span class="field">
<input id="projectname" type="text" ng-model="project.name" name="projectName" class="form-control"
required/>
<label ng-show="projectForm.projectName.$error.required && (projectForm.projectName.$dirty || submitted)"
class="error" for="projectname">Please type project name</label>
</span>
</div>
</div>
</p>
<p>
<label>Description</label>
<span class="field">
<textarea ng-model="project.description" name="projectDescription"
style="resize: vertical; height: 110px;" class="form-control input-default"></textarea>
</span>
</p>
<p class="stdformbutton">
<button class="btn btn-default" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
</form>
Why after pressing the 'Enter' key on keyboard am I redirected to app.project.list instead of having the saveProject(project, projectForm) function executed?
The default type for buttons is submit. You have to explicitly unset it to "button" to avoid the submit action:
<p class="stdformbutton">
<button class="btn btn-default" type="button" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
You can also set the type="reset" if you want it to clear out the input values.