Getting ngmodel value out of duplicated forms - javascript

Excuse me if this a silly question,but I have tried so much. I have a two form fields which duplicate with add button. So here I am trying to access the input from value formfield using ngmodel. But when I duplicate the set of formfield using add button. The input which I entered in the value form field repeats when I click the add button. This happens when I am using ngmodel to get value. Is there any other way to solve this? Comment down if u have any doubts regarding the question
My sample code: https://codesandbox.io/s/formarraydynamic-forked-t7y9u?file=/src/app/app.component.ts

To get the value from Form and show it in UI. You can create a getter property in component which will return the value from that particular field like this.
get values() {
return this.myForm.value.map(x => x.value);
};
Add then bind this variable into your UI like this.
<p>result:{{values}}</p>
As your form is an formArray you will get your result in an array type.

Related

D365 CustomJS - Update Field with AutoNumber Field OnSave

I have a Autonumber field called 'ID' that generates an ID for a record. I want to set the Primary Name field called 'ID_Name' to this. I am currently using the following JS:
function setName(executionContext) {
formContext = executionContext.getFormContext();
var name = formContext.getAttribute("id").getValue();
formContext.getAttribute("id_name").setValue(name);
}
Pretty simple. I get the value of 'ID', assign it to a var called name, then set the value of 'ID_Name' to that var. This triggers OnSave.
This works fine when editing a record. The problem is, this does not work when creating a new record. I assume because at the time the OnSave triggers, Autonumber field 'ID' hasn't generated a value which can be used yet, so ID_Name is set to blank. Of course while editing, ID has a value because the record has already been submitted, so no problems. Is there a way around this issue?
Just set the OOB autonumber option on the primary name field of your entity. No code required and it saves you from duplicating data, which should be avoided when possible.
You can do some workaround using the OnLoad event and trigger an update when there is a mismatch between the two fields (meaning the value has not been saved) but I strongly suggest to don't use this kind of approach.
Ideally this can be solved using a synchronous plugin inside a post operation, at this moment in the pipeline the id field should be filled (you didn't mention if you are using the OOB autonumber or something different to generate the content of this field) and you can trigger the update inside a plugin.

Display values from form submission to a DOM

I am a learner of ReactJs. I have a fully functional form in ReactJS made with hooks. I've some fields and I just want to display my form submitted data to a DOM when handleSubmit is clicked.
I want the user to add any number of forms as it works and display all of those submitted data below.
Here is codesandbox code. Click Here
Thank you.
In your code you've attempted to use the array as an object, you should first indicate the array index, in your case it is 0 and that will give you access to the array first element which is your object and now you could get the values from it
let val = [...fields]
// when you want access the data
val[0].name
This is the bug in your code if I've got you correctly

How can I loop through the elements on my form to check which ones were touched?

I'm working with reactive forms in Angular 6. I have a form with several select inputs and checkbox elements. I'm currently getting the value of each input and passing that to the router.navigate() when the user clicks the apply button.
I would like to change my function and only get the value of each select inputs and checkbox elements if the user touched the input. None of the fields are required so it's possible the user will not touch several inputs. This way my url will not be polluted with a bunch of null values. I then want to take that object and pass it to my router.navigate().
I started writing the function to loop through the elements, but it's not working. I'm getting a
Error: Cannot invoke an expression whose type lacks a call signature.
Instead of trying to check against pristine I would be happy to check against falsy values. Any help will be appreciated.
addExtraParameters() {
this.providerForm.controls.forEach(element => {
if(element.pristine === false ) {
this.param.push(element);
}
});
this.router.navigate([],
{ queryParams: {
this.param // I want to pass the object here
}, queryParamsHandling: 'merge'
});
}
Try to use .dirty, It will be TRUE, if the user has already interacted with the form.

MVVM binding with Vue.js does not work as expected

I'm currently making a dynamic-sized editable list component in a form.
I have at least one input field shown which is responsible for the creation of new fields as you type. If you type anything else than a whitespace character, the value of this field is added to the model and then reseted.
On the next tick, Vue updates the view and create the new input field with the letter you typed in, and I give the focus to this field so the user can continue typing as-if nothing happened for him.
So when the field is created, the model gets a new item which has the letter you typed in as its value. The problem is that when you edit the created field, the model isn't updated.
I made a JSFiddle so you can check it by yourself
itemBlured: function (idx) {
console.log(vm.songs[idx].name); // Always print the same letter for a given field
}
The final goal of the itemBlured method is to remove the last edited entry in the model if its value is empty. But for now you can see, by opening your dev console that even if you change the value of a field, the Vue model isn't updated.
Any help or idea is welcome :)
I found the reason why the binding did not occured.
When dealing with <input> tags, you must use the v-model attribute instead of value to tell Vue.js to bind the input to your model, otherwise it just act as mustache template.
Hope it helps someone one day.

CakePHP omitting to send an input field and changing input value onSubmit?

I am on CakePHP 1.2 at the office and, following my last question, I would like to send the array key of the selected option in a SELECT input instead of sending its actual value. I have tried a few things with the Model::beforeSave() function, without success.
I am aware that the data posted by CakePHP does not include the whole array, but only the selected value.
Here is what the function looks like at the moment:
function beforeSave(){
$this->Post->set('category_id', = array_keys($this->data['Annonce']['category_id']);
# debug($this->data);
}
Would there be a way to store the array keys into an hidden input and changing this input value depending on the user's selected item in the SELECT input, and to also omit sending the user's input but still send the hidden value?
$categories = Set::combine($categories,'{n}.categories.id', '{n}.categories.nom');
This did it for me... CakePHP assigns the array_keys() values automatically to the value field of the input.

Categories