Am building a Wordpress plugin and am Using Vue Js.
I set up a variable that will be set to true on a button click
Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)
The problem is that once the value changes, on button pressed, the form submits immediately.
This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.
Vue.js Data object
{
selected_to_show : false,
}
The modal div
<div v-if="selected_to_show === true" class='mp-modal'>
<form on:submit.prevent="xhrSubmit()">
<form>
</div>
<button v-on:click="selected_to_show = true"></button>
This works but once the modal opens, the form submits immediately.
Note: There is only two button elements in the form where are all set to type="button"
The target is to prevent the form from submitting automatically when shown
If any one still uses this approach to re-render vue apps, my advice is, don't.
The best way to re-render the app is by doing
this.forceUpdate();
This will re-render the vue app instead of modifying data properties of the vue instance which are utilized during rendering.
However, don't overuse it.
Most times when your view is not re-rendering naturally, its probably because you are doing something wrong.
I have the following input form component
<input class="form-control" #FirstName="ngModel" name="FirstName" [(ngModel)]="formModel.FirstName" value="{{userProfile?.firstName}}">
Where I render some initial data while rendering page.
My goal is to send this initial data when submiting this form even if nothing was entered inside the form from user. How can I achive it ?
For this particular use case I would suggest you to use reactive forms.As you can use the formControl and add your default value as a part of the formControl.
formItem = new FormControl('default Value');
onSubmit(){
data = this.formItem.value;
}
If we are using the template driven form
The we can use NgSubmit directive and add the resective logic to pick data from the template reference that you have provided.
Template driven forms:
https://angular.io/guide/forms#submit-the-form-with-ngsubmit
Reactive forms
https://angular.io/guide/reactive-forms#step-2-generating-and-importing-a-new-form-control
I have used modal in my html form and I am using angular $scope varible to bind textboxes using ng-model so if I am opening modal first and enter some value and just close the modal and reopen it then the values which was previously entered remains as it is.I want to make it blank on whatever times modal will open . I tried by putting autocomplete = "off" in input tag but didn't work for me.
To reset the input values use the following on modal close i.e
$('#my-modal').on('hidden.bs.modal', function () {
$(".modal-body input").val("");//this will reset all the input values
});
I hope this helps :)
yes, it does.
Is this any where documented?
Background: with my RoR Helper I made an error and created Links with data-method='GET'. Everthing still worked, only that I got a "Resend Data Warning" when refreshing the page ...
Now I found this strange behavior: data-method='GET'
Works with FF, IE, Chrome
Is this a standard? if yes it makes the Rails button_to (with all the form around) obsolette ...
edit: I forgott to say: _method is made out of data-method and this is as data posted, if i change the 'GET' to a - lets say 'PUT' I get RoR routing errors
an other edit: OK, I try too explain with a better example:
the following line
"<a data-method='PUT' href='?'>post</a>"
creates a POST request with _method='PUT' as data
no it is not a standard, as long as you say that RAILS Jquery_ujs.js is not a standard.
Rails/Jquery is doing this Magic:
if you take a look here all the magic is gone ...:
$.rails = rails = {
// Link elements bound by jquery-ujs
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with], a[data-disable]',
// Button elements bound by jquery-ujs
buttonClickSelector: 'button[data-remote], button[data-confirm]',
// Select elements bound by jquery-ujs
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]',
// Form elements bound by jquery-ujs
formSubmitSelector: 'form',
// Form input elements bound by jquery-ujs
formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type])',
// Form input elements disabled during form submission
disableSelector: 'input[data-disable-with]:enabled, button[data-disable-with]:enabled, textarea[data-disable-with]:enabled, input[data-disable]:enabled, button[data-disable]:enabled, textarea[data-disable]:enabled',
// Form input elements re-enabled after form submission
enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled, input[data-disable]:disabled, button[data-disable]:disabled, textarea[data-disable]:disabled',
// Form required input elements
requiredInputSelector: 'input[name][required]:not([disabled]),textarea[name][required]:not([disabled])',
// Form file input elements
fileInputSelector: 'input[type=file]',
// Link onClick disable selector with possible reenable after remote submission
linkDisableSelector: 'a[data-disable-with], a[data-disable]',
// Button onClick disable selector with possible reenable after remote submission
buttonDisableSelector: 'button[data-remote][data-disable-with], button[data-remote][data-disable]',
I'm trying to write a small Angular app with the following functionality:
Form starts empty with placeholder text.
User enters item in required textbox.
Angular pushes item to collection.
Reset form inputs to default.
I've got code that looks like this (jsfiddle: http://jsfiddle.net/Nn37v/1/) :
HTML:
<div ng-controller="MyCtrl">
<form name="talkForm">
<input ng-model="newVoice" placeholder="Say something" required />
<button ng-click="saySomething()">Say</button>
</form>
<ul>
<li ng-repeat="c in conversation">{{c}}</li>
</ul>
</div>
Javascript:
function MyCtrl($scope) {
$scope.conversation =[];
$scope.saySomething = function(){
if ($scope.talkForm.$valid){
//push to list
$scope.conversation.push($scope.newVoice);
$scope.newVoice='';
}
}
}
The problem I'm facing is when $scope.newVoice='' executes, the form is rendered invalid and I get the helpful HTML5 validation pop up to encourage me to fill in the form properly. Obviously this is not the behaviour I want - what is the correct way to do this with Angular?
To remove the HTML5 validation (since it will only work on compliant browsers) why not add the novalidate attribute to the form?
The validity of the form will still be invalid due to the 'required' attributed.
Seems that the following pull request in 1.1.x branch of Angular will add a $setPristine method to allow this to happen
https://github.com/angular/angular.js/pull/1127