I am new to AngularJS.
In the following fiddle, when user clicks on "This submit triggers validation. But I wanted to put this button at the end of the page" button. I could see alert/error but I want to show a custom message, which I am struggling to do it.
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="triggerSubmit()">Wanted this submit to trigger the validation to the form on which this button doesn't belong, e.g. trigger to header</a>
js fiddle link
http://jsfiddle.net/unWF3/6/
Thanks,
Kalyan Basa
To disable native browser validation add novalidate attribute to form element:
<form novalidate submit-on="myEvent" ng-submit="onSubmitted()">
Related
I my angular application, I'm using a reset button to clear the data in a text box. But the binding is not working properly with the reset button.
<form>
<input type="text" name="email" ng-model="ch.email"><br>
<input type="reset" value="Reset">
</form>
<div>{{ch.email}}</div>
When some text is typed in the text box, it appears in the div, But after resetting, The text in the div doesn't disappears.
Please see the fiddle
You can use a button instead
HTML:
<form>
<input type="text" name="email" ng-model="changestore.sample">
<br>
<input type="button" value="Reset" ng-click="reset()">
</form>
<div id="textdisplay">
{{changestore.sample}}
</div>
JS:
$scope.reset=function(){
$scope.changestore={};
}
Working Fiddle:http://jsfiddle.net/aks0kmwe/
HTML 5 reset button won't clear the ng-model, it clears only the value from the input box
Working Example:http://jsfiddle.net/ADukg/12591/
HTML5 Reset button will only clears the input control values but not the angular ng-model values that doesn't mean it is refreshing the page but it resets html form fields to their initial values. Here is working example
Html:
<form>
<input type="text" data-ng-model="name" />
<span data-ng-bind="name"></span>
<input type="reset" value="Reset" />
</form>
Script:
var myApp=angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.name="Angular JS";
})
When you click on reset button it will clear textbox but not span tag value.After this you try to access name property value of scope using angular.element($0).scope() by doing inspect element on browser and it is still "Angular JS" only.
I want an error message to appear if the user clicks submit with no content, and I want the submit button to be disabled.
I can get either one working, but not both at the same time.
The code below brings up the message but allows an empty todo item.
<form name="todoForm" novalidate >
<div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered-->
<input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/>
<button input type="submit" ng-click="addTodo()" >Add To List</button><!--disables form if form not valid-->
</form>
This version disables the submit button but doesn't bring up the message
<form name="todoForm" novalidate >
<div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered-->
<input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/>
<button input type="submit" ng-click="addTodo()" data-ng-disabled="todoForm.$invalid" >Add To List</button>
</form>
I presume this is because the message can't be displayed when the input button is disabled because nothing has been submitted?
I've tried using $disabled and $invalid instead but they haven't worked.
I removed the conflicting ng-if on the ng-message element. Here is a working plunk showing the fixed code.
http://plnkr.co/edit/gL0GoFT47mSeydKReLuD
My assumption is that you forgot to inject the 'ngMessages' module as an external dependency.
You can fix your code like this:
var app = angular.module('plunker', ['ngMessages']);
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.
The validation is being highlighted correctly, but when I click submit button, even with empty form field, the form is still being submitted (and nick value is undefined)
I tried adding novalidate to the form -- but that didn't help.
<form class="nick" ng-submit="joinChat()">
<input type="text" required name="nick" ng-model="nick" ng-minlength="2" ng-maxlength="10">
<button>Join</button>
</form>
I'm trying to follow this guide here:
http://www.ng-newsletter.com/posts/validations.html
The joinChat() function doesn't do any validation itself. As its my understanding this shouldn't be necessary when using Angular form validation.
$scope.joinChat = function(){
socket.emit('chat:join', { nick: $scope.nick });
};
Invalid input does not prevent angular form submission, instead try this:
<form class="nick" novalidate ng-submit="joinChat()" name="myform">
<input type="text" ng-required="true" name="nick" ng-model="nick" ng-minlength="2" ng-maxlength="10">
<button ng-disabled="myform.$invalid">Join</button>
</form>
Fiddle
In the following example, message is undefined when I display it in the controller after the event is fired. Why?
<form>
<input type="text" ng-model="message.Title" />
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-click="sendMessage(message)" />
</form>
Controller:
$scope.sendMessage = function(message) {
console.log(message);
}
My code seems identical to the documentation here except my controller manages the entire "page" not just the form.
Wow nevermind, apparently when you submit with blank values it doesn't even create the object.
I see you've found your problem, but I'd like to propose a solution to prevent your problem anyway:
<form name="messageForm" ng-submit="sendMessage(message)">
<input type="text" ng-model="message.Title" required/>
<span ng-show="messageForm.title.$error.required && messageForm.title.$dirty">required</span><br/>
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-disabled="messageForm.$invalid" />
</form>
The above will make the Title required, display an error message, and disable your submit button if the form isn't valid.