Develop Reference

Angular Form Array - Dynamically Add Value to Nested Form Group

I followed the this video to create a reactive form to input data into an Angular application I am working on. It does what I want for the most part, however, I have added an additional control("setNumber") to be added in the reactive form array, but instead of inputting a value through the input fields of "name" and "gender", to enter it into the form I would like the value to auto-populate to the getUserForm group/submittable form automatically based on the iteration of the component .
I would ideally like it to display next to name and gender as well as be placed within the form
I put the code on StackBlitz here, where I just have setNumber(core>service>exerciseInput.service.ts) as its own input field and it does indeed update the form to be submitted...but for some reason there I am getting a type error on stackblitz that I am not getting in VSC. But its the code I am using and it works fine on my machine.
Application view
Anyway from stackblitz I believe I should be able to use property binding somewhere to pass i as a value into the component(not just the view as shown in the span string interpolation) so that the form automatically populates i as the setNumber within the userArray, but I've had no luck in my attempts over the last few days.
The fix should really be something incredibly easy I'm overlooking in the following block of code in input-array.component.html but I just cant get it to work.
<div *ngFor="let u of userArray.controls; index as i">
<span>Set {{ i + 1 }}</span>
<app-input [inputFormGroup]="$any(u)"></app-input>
<button (click)="removeUser(i)">Delete</button>
</div>
I would be incredibly grateful for any help!
Thank you

I'm trying to solve your problem and one of the solution is patching your FormArray via pipe, but I think there you need to implement ControlValueAccessor interface and make communication between parent and child Forms without mutation. Pay attention to IndexedFormPipe
Stackblitz

In your stackblitz, the type errors were fixed by adding form1: FormGroup in InputArrayComponent (I had to add types elsewhere too). Also, there were errors with regards to importing scss files that weren't there.
In any case, I may have misunderstood your question, but if you simply want to pass the value of i+1 to the input component and set that value to the FormControl of "setNumber", you simply add an Input() value to InputComponent (I've called it index):
#Input() index: number;
Then in the InputArrayComponent template I pass i+1 to the inputComponent
<app-input [index]="i+1" [inputFormGroup]="$any(u)"></app-input>
And in ngOninit() for the inputArray I assign the value:
this.inputFormGroup.get('setNumber').setValue(this.index);
Here's the stackblitz:
https://stackblitz.com/edit/angular-ivy-2rwlwu?file=src/app/views/input/input.component.html
--- EDIT ---
Your comment made clear an issue with deleting users – the index doesn't update. To have the index update automatically as users are deleted, you need to have the logic be performed any time the input changes, which can be done with a set function:
#Input() set i(value: number) {
this.index = value;
this.inputFormGroup.get('setNumber')?.setValue(value);
};
The issue with this is that it overwrites any changes to setNumber that the user may have made. There are ways around it, but my gut tells me it doesn't make sense for this value to be edited anyway.
So you could simply replace the input with a label that holds the value of index. The value will still appear in the form group (and in the submitted result), but there's no way for the user to edit it.
I've forked the stackblitz again with the differences:
https://stackblitz.com/edit/angular-ivy-hhhz9m?file=src/app/views/input/input.component.html

how to automatically get date in specific format from DatePicker?

I'm using the component DatePicker from antd.
I have currently a Form from antd, in which there's a Form.Item, in which I put the DatePicker.
I want the Form.Item to be given the date in a specific format, lets say YYYY-MM-DD, is there a way to do that?
by giving it the prop format I can choose how it will look like in the UI but I'm trying to make it send back the value by the same format.
I've tried giving it a dateFormat prop with the function
function dateFormat(date) {
return moment(date).format("YYYY/MM/DD");
}
but it doesn't work.
is there a way to do this manipulating the data in the onChange function?

so apparently there's no way to do it in the props,
I've checked and so has #MoaazBhnas.
If anyone somehow finds a way, I'll be looking forward to hear!

Forwarding the checkbox state change to the parent component using callback React Hooks

In the child component, I change the checkbox state and want to pass the value of this state to the parent component. Transfer this value to the parental state. Now my code looks like this. In Teaser component, autocomplete is undefined and the code does not work
enter image description here

setSwitchValue don't return any value. so nothing is passed back to callback and like #DanneManne mentioned you have one typo mistake.

The callback chain looks right, but it also looks like you are using the wrong variable in Teaser on line 13. I assume it should check the value of autocompleteData and not autoComplete (which is a function).

Ant Design: defaultValue of <DatePicker/> component is not working as expected

I am creating a detail page where I want to display an editable deadline and for that, I am using <DatePicker> component of Ant Design. The problem is when I set defaultValue={moment(deadline)} it's not showing the date deadline variable is holding but instead, it is showing the current date.
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="Set Deadline"
defaultValue={moment(deadline)} //moment(deadline) returns valid moment date objcect
onOk={(value, dateString) => {
newDeadline = value._d;
updateDeadline(newDeadline);
}}
/>
I don't know where I am doing wrong please help me to find it out...
UPDATE
When I console the value of deadline, typeof deadline, moment(deadline).toString() all are returning data as expected.
When I use value={moment(deadline)} instead of defaultValue={moment(deadline)}, It's also working fine.
One interesting thing, when I pass date string instead of deadline variable to defaultValue, It's working smoothly.

How to get the value of a datetime_select field with javascript in ruby on rails

I had a previous question that touched this topic (Rails: how to get value from another field when executing an onchange remote function in textfield), but then I dugg a little deeper and realized that my problem is the datetime_select method.
I have a textfield with onchange. In the onchange I need to get the value of a datetime_select field to pass as a parameter when making the ajax call to my controller. The first thing to note is that a datetime_select is actually composed of five dropdowns (year, month, day, hour and minute), so I need to get the values of each of them separately (I presume, is there a simpler way?). But when I try to get their value with code like:
$(model + '_' + attribute + '_3i').value
which should return the value of the "day" dropdown I get an error: "TypeError: $("model_attribute_3i").value.toS is not a function"
If I create all the dropdowns for the datetime objects manually the same call works just fine. So there seems to be some magic in the way a datetime_select is composed that prevents me from asking the value of the dropdowns. Is there any way to go around this or do I just have to recode the datetime_select functionality in my application?

Problem seems to be solved for now, problem was me being a javascript n00b... apparently I used same variable names in too many places which leaded to weird behavior.