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.
Related
I have a form which when I submit, I reinitialise it as the form has been submitted. I then show a message and stay on the same page.
However, the form's fields come up with the error messages as the form has been "touched".
Demonstrated below:
I have read some articles about how to go around this but none are working for me.
My HTML:
<form name="newPost" ng-submit="makeNewPost()">
<div class="form-group">
<input name="title" maxlength="46" minlength="2" type="text" class="form-control" ng-model="post.title" required="required">
<div ng-messages="newPost.title.$error" ng-if="newPost.title.$touched">
<div class="errorMessage" ng-message="required">Title is mandatory *</div>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-success" id="submit">
My controller code to reset the data:
var resetData = function(){
$scope.post = {};
};
resetData();
Of course there are more fields but to solve the problem, just this simple code will demonstrate it.
Any input will help. Thanks chaps!
Your resetData function should be:
$scope.resetData = function(){
$scope.post = {};
$scope.newPost.$setUntouched();
$scope.newPost.$setPristine();
}
where newPost is form name & $setUntouched, $setPristine will make form pristine just like initially loaded. Call this function in the end of submit function.
I'm using the required attribute from HTML5 validations. I don't have an idea why the form still submits even though the html5 validates the empty input field.
Here's the Plunker link. http://plnkr.co/edit/evh0fCD5hdyoXXuxJrUy
<form name="searchUser" ng-submit="search(username)" validation>
<input type="search" placeholder="Username" ng-minlength="1" ng-model="username" required/>
<input type="submit" value="search" ng-click="search(username)" />
</form>
Of course it will submit, the required attribute will only trigger the validation in the field, it wont stop the submit. For this to work you have to do something like this:
if($scope.searchUser.$valid){
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
$scope.user = null;
}
Below plnkr:
http://plnkr.co/edit/XznoWH71arlV5RaDLJsd?p=preview
Hope it helps =)
I have a form where a model contains an array of sub-models, like this:
<form name="form1">
<div ng-repeat="sub in model.submodels">
<input ng-model="sub.name" required>
<button ng-click="delSubmodel($index)">x</button>
</div>
<button ng-click="addSubmodel()">+</button>
<button ng-disabled="form1.$invalid" type="submit">Save</button>
</form>
How can I make form invalid when there are no input fields (or, in general, when the count of input fields is less than/greater than some value)
Update: Thanks for responses, I hope this can be done outside of controller.
Okay, I just got what you want to achieve, you will had to add a constraint to the form, which is the size of the subModel, so in your submit method:
Before doing anything
$scope.form1.$setValidity('size', model.subModels.length <= 0);
This will set the validity of the form to false in case your condition is false, or viceversa, you can also show a message to notify it to the user, adding this:
<form name="form1">
<div ng-repeat="sub in model.submodels">
<input ng-model="sub.name" required>
<button ng-click="delSubmodel($index)">x</button>
</div>
<input type="hidden" name="size" ng-model="model.subModels.length" />
<button ng-click="addSubmodel()">+</button>
<button ng-disabled="form1.$invalid" type="submit">Save</button>
You can check this example if you don't feel you didn't understood well my point, which is doing the same, just changing the validity for a single input.
Hope it helps you.
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 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()">