I have a grid of students and a button. When a user clicks it, a new modal is shown.
In the modal there are some inputs and a button "save".
When a user clicks save via angular, the new student is added and the modal is closed.
I want to prevent the modal from closing when the input are not filled.
How can I do this?
In other words, I want the save button to not do the job of ng-click and data-dismiss="modal".
You can disable button if inputs didn't validated (required, max, etc.) like this:
<form role="form" name="formInTheModal" id="formInTheModal" class="form-horizontal">
<div class="form-group">
<label for="inpDummy" class="col-sm-4 control-label">Enter</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="inpDummy"
ng-model="inpDummy" maxlength="50" required>
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="doJob()"
ng-disabled="formInTheModal.$invalid" > DO
</button>
</form>
Related
I have an Angular directive that includes a form with a datepicker. I am trying to create a function to keep the button click from calling submit on the form. I can not determine where to find the .opened attribute. When I was performing the open with ng-click everything worked. Below is sample code.
HTML:
<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
<div class="form-group">
<label class="control-label" for="effectiveDate">Effective Date</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
<p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
</div>
</form>
I also tried passing dpEffectiveDate into the openDateHandler function.
Below is my Typescript function
openDateHandler = ($event) => {
$event.preventDefault();
//dpDate.opened = !dpDate.opened;
}
How do I access the .opened attribute?
If all you are trying to do is prevent the submit behaviour, simply add 'type="button"' to your button element.
<button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">
By default, a button inside a form will act as a submit button unless it's given a different type.
You shouldnt need to mess with the opened state of a date picker to prevent a form submitting.
There are two buttons, through which popup is opened,
I have input field in that popup and applied validations on that input field.
If I close the popup and clicks on second button then input value is already got filled, because I used same input field to reduce code.
How to reset that ng-model value of input field?
I tried to set it null on click of close button, but after clicking on second button it set null but shows valiation errors on first time.
How to achieve this functionality using same input field?
<form name="vm.pvtZipCodeSearchForm" id="pvtZipCodeSearchForm" class="clearfix">
<div class="alert alert-danger" ng-if="vm.errorMsg">{{vm.InvalidAddressError}}</div>
<fieldset class="form-control form-control-wrapper">
<div class="fields">
<input type="text" class="form-control" placeholder="{{vm.lang.tcZipCode}}Postnummer*" title="{{vm.lang.tcZipCode}}*" name="zipCode" maxlength="5" ng-model="vm.tariff.zipCode" ng-maxlength="5" ng-minlength="5" ng-required="!disable" />
<div ng-if="vm.isValidForm" class="error-message" ng-messages="vm.pvtZipCodeSearchForm.zipCode.$error" role="alert">
<div ng-message="required">{{vm.lang.errMsgBlankField}}</div>
<div ng-message="minlength">{{vm.lang.errMsgShortField}}</div>
<div ng-message="maxlength">{{vm.lang.errMsgLongField}}</div>
</div>
</div>
<br />
<div class="fields tac">
<button type="button" ng-click="vm.tcSearchZipCode()" class="tc___button--search">{{vm.lang.search}}</button>
</div>
</fieldset>
</form>
You can try setting
vm.pvtZipCodeSearchForm.zipCode.$pristine = true;
I have a form which is dynamically generating the fields, I am using ng-form for this. The form has an ng-repeat for input fields and the main form has a 'Save' button.
i.e when one of the input fields is dirty and has content, the save button should be enabled and should be disabled otherwise.
Here is my HTML Code :
<form class="form-horizontal" name="$parent.fSForm" novalidate ">
<fieldset class="form-group pl-sm" ng-repeat="fs in list track by $index">
<ng-form name="innerForm">
<div class="col-md-5">
<input type="text" class="form-control" autocomplete="off" name="fsl" ng-change="fileChanged()" ng-model="fs.path" placeholder="Add new here">
</div>
</ng-form>
</fieldset>
<a class="prop-toggle ng-binding" href="" ng-click="addNew()">Add More</a>
</form>
</div>
<div class="footer">
<span>
<button type="button" class="btn" ng-click="close()">Cancel</button>
</span>
<span>
<button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="fSForm.$error.fooname">Save</button>
</span>
</div>
So for my save button to be disabled when the form loads initially how should I go about validating that with an ng-form present? The save should be enabled when one of the input fields has some text in it. not sure how we can handle ng-disabled with ng-form within a form save button
I have an Angular modal form that I'm styling with Bootstrap. I I want to validate when the user clicks "I Agree." (I don't want to submit the form because it is part of a larger form that will be submitted later.) How can I force this validation when the button is clicked? Also, should the form name be the same as the larger form or have its own name?
Modal:
<form name="agreementForm" novalidate>
<div class="form-group" ng-class="{
'has-error':agreementForm.signature.$invalid && !agreementForm.signature.$pristine
}">
<label class="control-label" for="signature">Signature</label>
<input type="text" id="signature" name="signature" ng-model="agreementForm.contact.signature"
placeholder="Signature (e.g., /John Doe/)" class="form-control" ng-minlength=1 ng-model-options="{ updateOn: 'blur' }" required />
<span ng-show="agreementForm.signature.$error.required && !agreementForm.signature.$pristine" class="help-block">
Please type your signature to agree</span>
</div>
<div class="modal-footer">
<button ng-click="$dismiss()" class="btn btn-warning">Cancel</button>
<button ng-click="$close()" class="btn btn-primary">I agree</button>
</div>
</form>
Would ng-submit solve your issue? For instance,
<form ng-submit="$close()">
<input type="text" ng-model="signature" ng-required="true"/>
<button type="submit">Submit</button>
</form>
It prevents the request being sent to the server and should still perform the validation on the form.
According to the docs, pressing enter in a form would "trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)". Is there any way to instead set which button should be triggered?
I have a form in which pickadate.js creates some button elements before the submit button.
It doesn't matter how many buttons are before the submit button.
If you have ngSubmit directive on your form element function inside ng-submit="" will be fired.
For example.
<div ng-controller="MyCtrl">
<form ng-submit="processForm()" name="myFormName">
<input type="text" ng-model="myForm.name" placeholder="name" required="required"/>
<input type="text" ng-model="myForm.email" placeholder="email" required="required"/>
<input type="button" value="First button" ng-click="alert('First button')"/>
<input type="button" value="Second button" ng-click="alert('Second button')"/>
<input type="submit" value="Submit"/>
</form>
</div>
When you press the 'Enter' key (in my example) angular will call $scope.processForm function and you will see "Submitting form.." message.
$scope.processForm = function(){
alert("Submitting form..");
}
I've created JSFiddle example for you.