get hidden input value on click of button in reactive forms angular

Question

I am trying to get values of hidden input which is added dynamically on click of insert more button.

Here is stackblitz link: get hidden input value

I tried to use patchValue() method on linkTo() function but no luck, I am getting empty string on click of Get Values button in console.

in console:

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

here selectedLinkTo value is empty.

Answer 1

I have try something with code and added 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
    })    
}

For validation, you can add following code

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

And for adding new Row add here also

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")
  }
}

This will work for the validation.