I am looking for a way to reset the file selection, in case the user choose an invalid file for instance.
From this issue on gitHub, it appears that you need to unbind the event in order to reset the file selection, now, how do I do such a thing in AngularJS?
Markup:
<form name="applyForm" data-file-upload="model.uploadOptionsResume" action="{{model.application_url}}" method="{{model.method}}" enctype="multipart/form-data">
<fieldset>
<input type="file" data-ng-model='model.formData.resume' name="resume" data-ng-disabled="" data-valid-file data-my-validate data-value-required="true">
<submit data-ng-disabled="applyForm.$invalid || innerLoader" class="btn btn-primary" style="width:99%;" data-ng-click="submit(); model.submitFormApplicant()">
Apply
<!-- submitFormApplicant() check if a file is selected and if not does regular submit -->
</submit>
</fieldset>
</form>
I think that unbinding the event is required because of the closed over variables that are captured with the .on('click', ... anonymous function. I am pretty sure your code can be structured to not rely on the closure, thus removing the need to unbind from ng-click. However, without seeing your code, I cannot be sure that closures are your problem nor can I really recommend how restructure your code if they are.
Related
I have an Angular Formly form inside an ng-repeat. I've got everything working as I would expect except for the reset button. For some reason clicking any reset button always resets the last form, not the one it's supposed to. Submitting and updateInitialValue() seem to work fine.
<div ng-repeat="model in vm.models">
Here is the form declaration inside the repeat:
<formly-form model="model" fields="vm.fields" options="vm.options[$index]" form="vm.form[$index]">
And here is the reset button.
<button type="button" class="btn btn-default" ng-click="vm.options[$index].resetModel()">Reset</button>
Here is the whole thing in a fiddle.
http://jsbin.com/feguvulumo/edit?html,js,output
Thanks in advance for any help you can give!
I figured this out with some help from #kentcdodds on the Formly gitter chat (https://gitter.im/formly-js/angular-formly)
He suggested that the issue was that the repeating forms are sharing the same field configuration.
To fix it, I implemented a function that was called by an ng-init inside the ng-repeat. It builds up an array of fields objects as it loops.
function addFields() {
vm.fields.push(new getFields());
}
I then changed the fields property on the <formly-form> like so
<formly-form model="model" fields="vm.fields[$index]" options="vm.options[$index]" form="vm.form[$index]">
Full solution
http://jsbin.com/yanopeyija/1/edit?html,js,output
I am also new to angular, but generally this could be achieved if we change the button type as reset :
<button type="reset" >
I've been struggling with this for a few hours, and I'm coming up blank. I wouldn't build this this way, but this is someone else's code and refactoring it all is way beyond the scope of my part of the project. I need something that works within the way it's currently built. Here is a rough approximation of what the html looks like:
<div ng-controller=OuterController as outerController>
<button ng-click="save()" ng-disabled="?????">Save</button>
<div ng-controller="PartialController as partialController>
<div partial which can be replicated a bunch of times and called recursively>
<form name="partialForm></form
</div>
</div>
</div>
So, there can be a ton of instances of partialForm within the dom, which may be different degrees of childhood from the OuterController, and I want to be able to check if any of them have ng-invalid for the ng-disabled on the save button.
Any thoughts? :)
I am using angular-unsaved Changes directive as well as the angular built in form controller to detect if a form is $dirty.
I have a form on a specific page that even though I edit elements, the form never registers as dirty. I have gone so far as to strip everything and leave only:
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" id="thematiff" class="form-control" >
</form>
The formis never $dirty even when I change the value of the input. Any ideas what the problem could be causing the changes to input not to be detected? Is it that there should be an angular input equivalent tag instead of a plain old "input"?
What could be disabling the detection?
Ng-model is missing on your input field.
Validations and all form enhancements are provided by utilizing ng-model directive (and its controller). So add ng-model and everything is Ok.
See: http://jsbin.com/podepo/edit?html,output
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" ng-model="whatever" >
<pre>{{WHAT|json}}</pre>
</form>
I'm building a simple form using AngularJS Messages.
Basically what I want to happen is:
User submits form, all appropriate errors show and prevents
submission
User then completes fields and errors hide one by one after 'focus out' of field ($touched ?)
First point is working fine but I can't figure out the second part, I can't hide the error messages at all afterwards. I'm sure I'm missing something simple but other related questions aren't really helping too much.
Any ideas?
<form name="orderForm"
ng-submit="orderForm.$valid && placeOrder()" novalidate>
<input type="text"
ng-model="orderParams.delivery_address.full_name"
name="fullName" required />
<p ng-message="orderForm.fullName.$error"
ng-if="orderForm.fullName.$invalid && orderForm.$submitted">
This field is required</p>
<input type="submit" value="Submit" />
</form>
For me the problem was solved by adding ngMessgaes to my module dependencies.
I installed had it installed with bower before, but forgot to add it to module dependencies. For some reason it caused no errors. It only prevented my error messages from hiding.
you need to do three things:
1. add a boolean variable in your controller like: "showMessageBox" which is set to true.
2. when you submit you set "showMessageBox" to false.
3. on your message box you put the ng-show directive and bind it to "showMessageBox" variable
I actually just figured this out. I'm using Angular 1.4.2 and it would seem that Angular Messages is now part of the core build which I didn't pick up on before (I'd just forgotten to inject into the angular module), removed the angular-messages.js file (which was probably causing conflicts) and the above code works fine.
Anyone know why the seperate module is still available on code.angularjs.org? - https://code.angularjs.org/1.4.2/
My current code looks like this:
<form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
<input ng-class="{error: home.forms.modal.name.$error}"
ng-model="home.modal.data.name"
name="name"
ng-minlength="5"
ng-required="true" />
...
</form>
<button ng-disabled="home.forms.modal.$invalid"
ng-click="home.modalSubmit(home.modal.data)">Submit</button>
I noticed there have been recent changes with messages for forms. What I would like to know is there anything at all in AngularJS that requires me to use the form element. If so then how could I change the above code so it would work with just a DIV ?
You can use the ng-form attribute on any element
<div ng-form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
...
</div>
<button ng-click="home.modalSubmit(home.modal.data)">Submit</button>
validation on the client is way to hell, you should get the validation errors by server in .error callback of $http , and show them to client.
You may need to use forms with such directives, like ui-mask, to get the right value.
Using a form tag is syntactically correct, and some browsers (IE) do not display things correctly when you try to put form elements (input/button/textarea) into a page without them being surrounded by form tags.