Getting unique formcontrol values for duplicated formfields angular - javascript

Introduction:
I have a reactiveform. It contains two form fields named name and value. So I have a add button which duplicates the form. So if I click it the form fields name and value duplicates. So I am trying to use the respective inputs of the formfield named value below. I assign it to (I mean the one in html)formvalues below the form field. So when I enter the input(lets say 1) of the value formfield in the first form, the formvalues variable below gets updated to that input(1) entered. So now If I duplicate the form and enter another input(lets say 2) in that value formfield. Now the formvalues gets extra value 1,2.
Myproblem:
In real time I have a popup button in each set of reactiveforms. So In that popup the input of the particular value formfield appears. So if I duplicate and enter another input in the value formfield and now I click the respective popup of that particular form then the input of the respective value formfield(duplicated one) should be present. But now what a happens is that all the values present in the respective value formfield appears as (Example: 1,4,6,7).
I dont know whats the real issue here so Forgive me if my question title was misleading. Please comment below if my explanation was unclear.
SAMPLECODE: https://codesandbox.io/s/formarraydynamic-forked-di1js?file=/src/app/app.component.html
Note: Most part of the above code link was done by user #VimalPatel here in stackoverflow.I am giving him full credit for the code written in that link
I couldnt install boostrap in that sandbox code, so instead of that I have made a show button instead of popup to show the values I am getting.

Create a variable of type FormGroup as your form contains a FormArray. It will hold the currently selected form. In your button click pass the current form as argument to your show method.
<button (click)="openForm(form)">Show</button>
openForm(form: FormGroup) {
this.selectedFormGroup = form;
}
In your template you get show the selected form value like this.
<div *ngIf="selectedFormGroup">
{{selectedFormGroup.value | json}}
</div>
Working CodeSandBox
https://codesandbox.io/s/formarraydynamic-rqdhc?file=/src/app/app.component.html

Related

Change source of image field with javascript in Adobe Acrobat

I have a listbox in an Adobe Acrobat form. When I change the value of the listbox, the source of the image field has to be changed with a javascript script:
As a first step, I tried to change the src in javascript, so not yet with the listbox:
var logo = this.getField("companylogo"); // button field
logo.buttonImportIcon("C:\Users\VincentJanssens\Downloads\Blauw.png")
But even this code isn't working.
Thank you for getting me started!
The code can be very simple if you set the fields up to allow for that. The first step is to create buttons for each of the images you want to be available. Name these buttons such that the Export Value of the item in the Dropdown matches exactly. Set these buttons to Hidden and Read Only in the General tab.
Then add a button where you want the various images to appear on your form. Set this field to read-only too. Now, set up the Dropdown to Commit the selected value immediately and add the following JavaScript to the Format script of the dropdown. Replace the string 'displayImage' with the name of the button field you placed on your form.
this.getField("displayImage").buttonSetIcon(this.getField(event.target.value).buttonGetIcon())
Now each time the list item changes, the script will run and use the Export Value of the field to get the button icon from the button with the same name as the export value.
I've posted a working example file here.

Why ng-invalid class added with input if i reset the input component to default value?

I have input with type date in angular form and rendered with the default value(For ex: "1/1/2019").
Based on the sources on form reset, when we reset a form, the value of the form elements will reset to its initial value.
So, in this case, if i reset my angular form, the form's input element retains its original value. But, even the valid value is present in the input element.
ng-invalid class gets added to the input element?
Also, I have another doubt.
Please, check this sample below.
https://stackblitz.com/edit/angular-krw9jz-f5c7af?file=index.html
Here, i have used inputs for representing angular ngmodel binding and an normal JS input element with value attribute.
I have set the value for the two elements initially. So, as per the JS reset form standard, the initial given value retains. But, in angular the value of input changes null when resetting the form.
Please, let me know why this weird behavior followed in angular form?

How to get the text value from the input in p:autocomplete if selection was not made

I want to use the p:autocomplete element for searching persons in my application. If the the user selects an item from the autocomplete list then some action is called. But when he doesn't select any, there is button where he can search by the entered String and a table of persons will be shown.
So far I have an itemSelect event listener, which handles the first part but I identify the persons by Long IDs so the value of the p:autocomplete field is bound to a managedBean Long property. When I don't make any selection a hit the button to search I don't have the string value.
Is it possible to somehow get the String value from the inputField in the backing bean? The one option that I am thinking of is to have a hidden element next to the autocomplete and set the value of the hidden element with the value of the autocomplete when clicking the search button. However, I have all this in a custom component so I don't really know what are the IDs of the components and therefore cannot write the Javascript function (without some dirty unsafe hacking).

What is best way to make a calculation with input values from a html form?

I have a product form with 3 inputs
Price (fixed number)
Quantity (an input with type="text" where the user can enter a number)
Optional extra (a checkbox that the user can tick to add a number)
So far I have been using Javascript to get the value of the html elements, and then adding them and outputting the result into a html element.
I need the form to update on the fly, so that a user can enter a number into quantity and tick the box and the result update live. Unfortuantely I have been unbale to find a way to set variables when there is an update in a field, please see the link below of what I have done so far.
http://jsbin.com/tapen/2/watch?html,css,js,output
With Jquery its very easy to acess the value of an input field, or to set events to will execute when the field value is changed / updated.
As a pratical example i would suggest that you take a look in the code of a sample calculator using only jquery and html: http://firstemission.blogspot.com.br/2012/10/jquery-and-watermark-example.html

Accept Field Value when Form is submitted with Dojo

Small but boring issue:
We have an Form field inside an DojoX Grid (1.2). If the user changes the value inside this field, and is hitting the "Submit" Button without clicking somewhere else the new value is ignored.
Is there any way to "accept" all Values entered inside the field, when hitting submit? Or something like "onMouseOut" Accept value?
An colleague has found an solution:
grid.edit.apply();
before submit..

Categories

Resources