Retrieve the value of a hidden input when a button is clicked using reactive forms in Angular

Question

Retrieve the value of a hidden input when a button is clicked using reactive forms in Angular

I am currently attempting to retrieve the values of hidden input fields that are dynamically added when the user clicks on the "insert more" button.

If you'd like to view the code in action, you can visit this StackBlitz link: get hidden input value

I have tried using the patchValue() method within the linkTo() function, but unfortunately, I am encountering an issue where the console displays empty strings upon clicking the "Get Values" button.

Console Output:

loginFromArr: Array[2]
0: Object
name: "p1"
password: "p235"
selectedLinkTo: ""
1: Object
name: "876548"
password: "43545t"
selectedLinkTo: ""

As you can see, the value for selectedLinkTo is empty in the console output.

angular typescript angular-reactive-forms angular-forms hidden-field

Answer 1

Answer №1

I tried implementing some code and included the value in the SelectLinkTo.

linkTo(where: string, btnId: number) {
    console.log(btnId);    
    let formArray = (<FormArray>this.loginForm[this.currentTab].get('loginFromArr')).at(btnId)
    console.log(formArray);
    formArray.patchValue({
        selectedLinkTo :where
    })    
}

To perform validation, you can use the code below:

printCurrentTab() {
 if(this.loginForm[this.currentTab].valid) {
  console.log(this.loginForm[this.currentTab].getRawValue());
 }else{
  console.log("Please fill the required fields")
 }
}

Additionally, to add a new row, you can include the following function:

addMore() {
  if(this.loginForm[this.currentTab].valid) {
    this.loginFromArr.push(
      this.fb.group({
        name: ["", Validators.required],
        password: ["", Validators.required],
        selectedLinkTo: ["", Validators.required]
      })
    );
  } else {
    console.log("Please fill the required fields")
  }
}

Using these codes will help with the validation process.

Answer 2

I tried implementing some code and included the value in the SelectLinkTo.

linkTo(where: string, btnId: number) {
    console.log(btnId);    
    let formArray = (<FormArray>this.loginForm[this.currentTab].get('loginFromArr')).at(btnId)
    console.log(formArray);
    formArray.patchValue({
        selectedLinkTo :where
    })    
}

To perform validation, you can use the code below:

printCurrentTab() {
 if(this.loginForm[this.currentTab].valid) {
  console.log(this.loginForm[this.currentTab].getRawValue());
 }else{
  console.log("Please fill the required fields")
 }
}

Additionally, to add a new row, you can include the following function:

addMore() {
  if(this.loginForm[this.currentTab].valid) {
    this.loginFromArr.push(
      this.fb.group({
        name: ["", Validators.required],
        password: ["", Validators.required],
        selectedLinkTo: ["", Validators.required]
      })
    );
  } else {
    console.log("Please fill the required fields")
  }
}

Using these codes will help with the validation process.

Answer 3

Answer №2

To pass a form and set the control value, you can simply follow this approach.

<a style="border: 1px solid red;margin-top: 10px; margin-left: 5px;" id="a-{{i}}" 
  (click)="linkTo('a',item)" 
   class="btn-link-group border-right-0 first-btn"
mat-button>A link</a>

linkTo(where: string, form: any) {
    //debugger;
    form.controls['selectedLinkTo'].setValue(where);
  }

For a live demo, you can visit - https://stackblitz.com/edit/get-dynamic-added-component-values-fecshe

Hopefully, this solution proves to be beneficial to you.

Answer 4

To pass a form and set the control value, you can simply follow this approach.

<a style="border: 1px solid red;margin-top: 10px; margin-left: 5px;" id="a-{{i}}" 
  (click)="linkTo('a',item)" 
   class="btn-link-group border-right-0 first-btn"
mat-button>A link</a>

linkTo(where: string, form: any) {
    //debugger;
    form.controls['selectedLinkTo'].setValue(where);
  }

For a live demo, you can visit - https://stackblitz.com/edit/get-dynamic-added-component-values-fecshe

Hopefully, this solution proves to be beneficial to you.

Answer 5

Answer №3

function updateLink(whereTo: string, buttonId: number) {
this.loginForm[this.currentTab].get('loginFromArr').controls[buttonId].get('selectedLinkTo').setValue(whereTo);}

Kindly update your code with the function provided above.

Answer 6

function updateLink(whereTo: string, buttonId: number) {
this.loginForm[this.currentTab].get('loginFromArr').controls[buttonId].get('selectedLinkTo').setValue(whereTo);}

Kindly update your code with the function provided above.

Answer 7

Answer №4

snippet for linkTo function patchValue():

linkTo(destination: string, buttonId: number) {
        let formArray = this.loginForm[this.currentTab].get('loginFromArr').at(buttonId)
        formArray.patchValue({
            selectedDestination: destination
        })  
}

Try out the demo here: https://example.com/demo

Answer 8

snippet for linkTo function patchValue():

linkTo(destination: string, buttonId: number) {
        let formArray = this.loginForm[this.currentTab].get('loginFromArr').at(buttonId)
        formArray.patchValue({
            selectedDestination: destination
        })  
}

Try out the demo here: https://example.com/demo

Retrieve the value of a hidden input when a button is clicked using reactive forms in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Failure during building Angular 13 library with Ivy partial compilation mode

Bringing a JavaScript function into a TypeScript file results in it being treated as a namespace

In order to conceal the div tag once the animation concludes, I seek to implement React

How can input be prevented on keydown within angular6?

Diverse Templates within a Single Angular Component

Tips for setting up nested folders using Node.js on a Windows machine:

Issue with forRoot method not triggering within Angular library

Automate the selection of an item in a Primeng Listbox using Angular 2 and PrimeNg

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

Angular provides the capability to sort through data using various criteria

Adding a CSS class to a component element

Using react-hook-form to easily update form data

Having trouble with your React/TypeScript/Redux/Thunk action not dispatching and the state remaining unchanged?

I need a way to call a function in my Typescript code that will update the total value

Upon attempting to open Google Maps for the second time, an error message pops up indicating that the Google Maps JavaScript API has been included multiple times on this page

Enhance Your GoJS Pipeline Visualization with TextBlocks

What is the proper way to type the SubmitEvent so that the event.target.children property can be accessed

Develop a module using the Angular plugin within the Eclipse IDE

Setting a default value for a select option in Angular 2

"Overcoming obstacles in managing the global state of a TypeScript preact app with React/Next signals