I have a form with some input, and then a button that open a directive a modal popover where there is another form. the pristine state does not detect the changes in the directive.
How to solve this?
<form name="createFeeForm"
<input....
<input....
{{show the data from the something-popover}}
<something-popover....</something-popover>
<button ng-disabled="createFeeForm.$pristine">SAVE & CLOSE</button>
</form>
for the directives template.html
<form name="somethingForm">
<input...
<input...
<button ng-disabled="somethingForm.$pristine">SAVE & CLOSE</button>
</form>
The parent pristine will detect all input changes on input tag, except for the directive
I had a similar situation, and I couldn't trigger any kind of form behavior when it was a form inside another form (I wasn't using a directive, it was directly on the same file).
I'm using something like this:
The form triggers a modal id on href (in my case, I need to pass an Id, so I used a function for it):
<a data-toggle="modal" ng-click="passId(id)" href="#modalDirective">Open Modal</a>
and then, outside the form, you add the directive (usually I do it on the end of the page):
</form>
<something-popover....</something-popover>
When the page renders, Angular will load the template and the modal will be accessible, and yopu will have two separeted forms that you can handle.
Hope it helps!
Related
I am trying to use alpine.js to update a form's action, and am running into some confusion.
My code:
<div x-data="data=''">
<template x-if="data.url">
<div>
<form method=POST :action="data.url">
<input type="text" x-model="data.sitenumber">
<button type="submit">Submit form</button>
</form>
</div>
</template>
<input type="button" value="add data" #click="data = {url: 'www.com', sitenumber: 23}">
</div>
When I click on the button, the div form doesn't appear. My ultimate goal is to have a modal popup that is dynamically updated with an action button (delete record, etc.) when a link/button elsewhere in the document is clicked.
I tried following long with this ToDo app tutorial, but this creates a separate function, and I thought it would be possible to pass simple data variables to a different part of the div, especially since I'm not looping through an array.
Thanks!
I think the issue is that you do x-data="data=''" instead of using object initialisation syntax: x-data="{ data: '' }"
I read several answers on this topic but they don't seem to apply to my problem. My problem is quite complex. I have a form which uses ReportViewer.ASPX. The form is defined as following:
<form name="form" novalidate role="form"
sm-dirty-check
id="reportViewer"
method="post"
action="~/Infrastructure/ReportViewer/reportViewer.aspx"
target="viewerIFrame"
ng-show="crud.showForm" class="ng-cloak">
#* Form inputs *#
<input type="hidden" name="labelType" value="Rental" />
<input type="hidden" name="labelLayoutId" value="{{ crud.model.lbLayoutId }}" />
<input type="hidden" name="itemsToPrint" value="{{ crud.jsItemsToPrint }}" />
The actual forms are defined in the tabs using ng-form (I only shared the top portion of my Edit form which is relevant to my question).
I also have these buttons at the bottom of the form:
<button type="submit"
ng-if="crud.model.lbLayoutId!==0"
name="generateLabelButton"
id="generateLabelButton"
class="btn btn-primary pull-left"
ng-click="crud.generateLabel()"
ng-disabled="crud.isSaveButtonDisabled">
#Labels.generateLabel
</button>
<div class="pull-left generateLabelButton">
<data-desc:type ng-if="crud.model.lbLayoutId===0"
value="#Labels.generateLabel"
keep-pristine="true"
on-after-selection="crud.layoutSelected(selectedValue)"
title="{{ '#string.Format(Labels.selectX, Labels.labelLayout)'}}"
param="layouts"
message="#string.Format(Labels.selectX, Labels.labelLayout)"
selected="crud.model.lbLayoutId"
descrip-value="descrip"
id="layoutPickerButton"
name="layoutPickerButton"
button-type="button"
type="7"
filter-by="Label"
description="crud.model.lbLayout">
</data-desc:type>
</div>
So, if I have lblLayoutId defined, I have my regular submit button and I press it and get my form submitted and all is well.
If I don't have the lblLayoutId defined (it's 0), I need to use a directive which has a template for a button, when I press it, it opens a modal form to pick the layout, etc.
So, my problem is that after I picked the layout, I need to submit my form so the label can appear.
I tried making the directive to be of type submit (button-type property), this didn't work.
I also tried the following code in the method which is executed by the button when value is selected:
rentalEquipmentsCrudController.prototype.layoutSelected = function (selectedValue) {
this.model.lbLayoutId = selectedValue;
$("#generateLabelButton").click();
}
rentalEquipmentsCrudController.prototype.generateLabel = function () {
if (this.model.lbLayoutId === 0) return;
this.jsItemsToPrint = "";
this.itemsToPrint = this.getItemsToPrint();
this.jsItemsToPrint = JSON.stringify(this.itemsToPrint);
angular.element($("#viewerIFrame").contents()
.find("#reportViewer_ReportViewer")).empty();
let actionPath = angular.element($("#reportViewer")).attr("action");
if (actionPath.slice(-3) !== "pdf") actionPath += "/Labels.pdf";
angular.element($("#reportViewer")).attr("action", actionPath);
this.showViewer = true;
};
The layoutSelected method is executed from my directive and the next code is executed by my regular button.
So, I'm at lost as how to make it work.
The role of forms in client-side AngularJS applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload. Instead post JSON data and receive JSON data responses. Go to the server for data, but not html/js/css etc.
Read AngularJS <form> Directive API Reference - Submitting a form and preventing the default action.
You don't want to combine ng-click with a button of type="submit", this will still cause the form to submit (non-programmatically). Instead, use type="button". Alternatively, you can keep type="submit" but add the ng-submit="crud.generateLabel()" to the form element
<form>
...
<button type="button" ng-click="crud.generateLabel()">...</button>
</form>
Alternatively:
<form ng-submit="crud.generateLabel()">
...
<button type="submit">...</button>
</form>
I'm making a web app. I'm in the middle of implementing the Braintree and everything works fine. Now I have an issue with the view code for Braintree. Below is an essential view code I need for braintree integration:
<form name="form" ng-submit="submitPayment()">
<div id="payment-form"></div>
<input type="submit" class="button button-form-success button--primary vertical-offset--small" value="Pay">
</form>
Now, I am trying to add another button next to pay button, but whenever I put the button in the form, it triggers submitPayment() instead of button's action. How do I successfully add a button inside the form and trigger different function when clicked?
Just use a tag for that like below
Second Button
I want some input element be $setPristine when I submit the form. Because after I submit the form, I would empty the model bind to the input element, in case of user can totally input something new again. But once I empty the model, the input element would empty too, so the validate information would show, for required.
So I want $setPristine after submit the form. I figure out two ways:
One:
I use expression in the ng-submit, like:
<form ng-controller="FormController" name="userForm" ng-submit="userForm.$valid?submitForm(),userForm.keywordsInput.$setPristine(): ''">
But this syntax seems wring because angular report error information in the console.
Two
I could pass form to the submit function, then $setPristine in the submit function :
$scope.submit = function (form) {
form.keywordsInput.$setPristine()
}
But I also don't this is a good practice, because in the angular official reference site, it suggest:
Do not use controllers to:Manipulate DOM.
Is this way a kind of manipulating DOM?
So is there a better way to achieve this job？
I had the same issue logging undefined $setPristine(). But,in the view it works.
<button class="button button-stable button-block " type="submit" ng-click="register(registerData);formName.$setPristine();"> Submit </button>
When you submit the form, you must have set some function to run in the "ng-click" attribute
Add formName.$setPristine(); after it
Basically, I want to use this HTML Form (Which loads in an iframe on a parent page) to submit using a parent page's button that when clicked will submit using the iFrame's built-in OnSubmit function. The problem here is that I could just use the javascript code with document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata(); which would fire off the required function in the JS, but I need to use the form's onsubmit and action attributes because the form needs to redirect correctly and send session variables, only on submit, to be loaded on the NEXT form that is being called via the form's action. HELP? Any better way to do this since I am stuck using iFrames? Tried using php include, but the HTML and CSS is terribly misconstrued in the parent window.
Code is simplified for sample purposes.
IFRAME HTML
<form name="prepform" method="post" onsubmit="uploaddata();" action="http://gp21.idmyasset.com/mobile/prep_b/index.php">
HTML CODE HERE
</form>
PARENT HTML
<div data-role="content">
<iframe src="prep_new/index.html"
frameborder="" name="prep_new" id="prep_new" class="contentiframe"></iframe>
</div>
<li>
<a onclick="document.getElementById('prep_new').contentWindow.document.forms['prepform'].submit();" data-transition="flip" data-theme="" data-icon="check">
Continue
</a>
</li>
I found another way to implement this...