What I'm trying to do is to enable submit button If all of the textboxes hold values in them. Disable the submit button otherwise. But the problem here is the number of textboxes may vary (dynamic) so I can not hardcode the models in ng-disabled attribute.
This is what I've tried so far: http://jsfiddle.net/codef0rmer/6uKAT/
Is there any other approach I should follow?
This is the basic idea.
<form name="myForm">
Item1: <input ng-model="item1" required/><br/>
Item2: <input ng-model="item2" required/><br/>
Item3: <input ng-model="item3" required/><br/>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
You want to use validation. http://docs.angularjs.org/api/ng.directive:form
Put all the input field with required attributes, then any empty input element would
make the form invalid. If invalid, then disable the button with ng-disable.
Related
Is there a way to inject some validation - custom or otherwise - that isn't tied to a form element? Like - validate that some condition is met, but have it work with standard AngularJS validation?
Update:
Here's what I'm trying to accomplish:
I have a form contains a list of sections. Each section is controlled by a checkbox, and the section will display (via an ng-if) when the checkbox is checked.
Within each section, there's an opportunity for an item to be selected via a popup modal that is activated by a button click. Until an item is selected for that section, the form needs to be invalid. Once an item is selected for each selection that is checked, then the form needs to be valid.
I have a button at the bottom of the form with an ng-disabled="frm.$invalid". I want that to stay disabled until each section that has been checked contains an item that was selected via the modal.
Update 2:
Here's some example code:
<form class="form-horizontal" role="form" name="frm" novalidate>
<label>Name: </label>
<input type="text" ng-model="name" required/>
<div ng-repeat="orderItem in orderItems">
<input type="checkbox" name="items[]" ng-model="orderItem.selected"/>
<div ng-if="orderItem.selected">
... bunch of form fields
<button ng-click="openExchangeSelectionModal(orderItem)">Select Item</button>
<div ng-show="orderItem.exchange_item">
Selected Item: {{orderItem.exchange_item.name}} - ${{orderItem.exchange_item.price | number: 2}}
</div>
</div>
</div>
<button ng-disabled="frm.$invalid" ng-click="submitOrder">Submit</button>
</form>
Checking if the form is valid won't help you in this case since there is no required input that's not being filled.
What I would recommend is that the disable button would call a function that makes some logic about the number of check boxes expanded and the number of selected items and returns the buttons state (true for active otherwise false)
Let's take the example code you put up:
//some html tags...
<button ng-disabled="checkValid()" ng-click="submitOrder">Submit</button>
</form>
Notice that I changed the frm.$invalid to checkValid function, which is a function that is defined on your controller and can perform any logic you want to determine rather show your submit button or not.
I have an input field that is bound to a model object, which I don't want to bind until the user clicks a button. I went through ng-model-option and updateOn, but seems they trigger only on out of the box JS events like blur and focus.
<input ng-model="modelobject" ng-model-options="{updateOn: confirmButtonClick}">
<button id="confirmButton" role="confirm" ng-click="confirmButtonClick == true" class="confirm-btn">Confirm</button>
How can I make the value bind to the model only upon the click of the button or a custom function? Would I need to write a custom directive?
You could do solve your problem by wrapping you fields inside a form and then update ng-model on submit of a form like ng-model-options="{updateOn: 'submit'}".
HTML
<form name="myForm">
<input ng-model="modelobject" ng-model-options="{updateOn: 'submit'}">
<button id="confirmButton" role="confirm" class="confirm-btn">
Confirm
</button>
</form>
Working Plunkr
Is there any way how to trigger validation when using ngModelOptions? My use-case is to have a form with all fields updating the ngModel on submit (due to the fact that I would like to revert the whole form when user clicks on Cancel button). Having this, I cannot validate my fields instantly. Fields are validated just when the model is updated thus onSubmit. Is there any build in solution or should I use my custom implementation?
<form name="editForm" ng-submit="edit()">
<input type="text" name="text" required maxlength="140" ng-model="myObject.text"
ng-model-options="{ updateOn: 'submit' }" />
<button type="submit" ng-disabled="editForm.$invalid">
Save
</button>
</form>
What I usually do is commit the form's view value on the js code and if form is invalid then do not submit. Thus in HTML I add an on-click attribute like:
<button on-click="edit(editForm)">
And then on the javascript
edit = function(editForm) {
editForm.$commitViewValue;
if (editForm.$valid) { // submit code }
}
I'm trying to disable a input field as soon as submit button is click. The angular way suggest this:
here button is disabled when check box is checked. same way I need to disable the input field when I click button.
<input type="checkbox" ng-model="check"> </input>
<input type="checkbox" ng-disabled="check">Checkbox to be disabled</input>
IJust set/reset the variable triggering disabled on input field in the click event of button:
Search : <input ng-model="query" ng-disabled="isDisabled" />
<button ng-click="isDisabled = true;">Name</button>
JSFiddle : http://jsfiddle.net/4YtLu/108/
<input type="checkbox" ng-disabled="isDisabled">Checkbox to be disabled</input>
in your controller, on submit set
$scope.isDisabled=true;
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()">