How to access the UI user input value inside a Flow and how to map it to flow input value in SSD?

[Vignesh-U]

I have created a sample form with firstName & lastName input field with Submit button. On click of submit button I am calling the userInfo flow(which concatenate the name using script node) by mapping the flow input value like page.firstName.
But the flow is returning empty result in console. What I am doing wrong here?

May I know how to bind&map the user input fields value to flow.

[Shamnad_KS]

@Vignesh-U , You can pass values to the flow in two ways:

1. Using [(ngModel)] – Simple for basic forms.
2. Using @angular/forms (Reactive Forms) – Better for forms with multiple inputs.

For larger forms, it’s recommended to use a FormGroup and bind each input using formControlName.

• Use a dependency node in the onInit flow to import @angular/forms.
• Create a new FormGroup
• Bind your input fields using formControlName.

page.form = new FormGroup({
    firstName: new FormControl('', { validators: [Validators.required], updateOn: 'blur' }),
    lastName: new FormControl('', { validators: [Validators.required], updateOn: 'blur' }),
});

You can access the input values using:

page.form.firstName.value

[Vignesh-U]

Hi @Shamnad_KS , I am using Studio9 , I tried creating FormGroup in script node and it is not working.
I don’t know where to create a new FormGroup? Could you please help me.

[Eldho]

@Shamnad_KS can you please support

[Shamnad_KS]

Sure Eldho , I’ve asked him to reach out to me on Teams when he’s available.

[Vignesh-U]

Thanks for helping me @Shamnad_KS .
PFB the solution.

1: Add a formGroup custom property in FORM component like this Key:[formGroup] and Value: page.formName
2: Add formControlName custom property for the Input fields.
Eg: formControlName = firstName
3: Use a dependency node in the onInit flow to import @angular/forms.

4: Use script Node in onInit Flow to create a new form group.

Now we can access the user inputs inside flow via the page object.

[Eldho]

Thanks @Vignesh-U for sharing back to community