單擊反應形式 angular 中的按鈕時獲取隱藏的輸入值

Question

我正在嘗試獲取在單擊insert more按鈕時動態添加的隱藏輸入的值。

這是 stackblitz 鏈接： 獲取隱藏的輸入值

我嘗試在linkTo()函數上使用patchValue()方法，但沒有運氣，單擊控制台中的“ Get Values按鈕時出現空字符串。

在控制台中：

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

這里selectedLinkTo值為空。

Answer 1

我嘗試了一些代碼並在 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
    })    
}

為了驗證，您可以添加以下代碼

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

並且為了添加新的 Row 也在這里添加

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

這將用於驗證。

Answer 2

您可以像這樣傳遞表單並設置控件值。

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

這是演示 - https://stackblitz.com/edit/get-dynamic- added-component-values- fecshe

希望這可以幫助。

Answer 3

linkTo(where: string, btnId: number) {
this.loginForm[this.currentTab].get('loginFromArr').controls[btnId].get('selectedLinkTo').setValue(where);}

請用上面的代碼替換您的 linkTo 函數。

Answer 4

鏈接到函數 patchValue()：

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

結帳演示： https : //stackblitz.com/edit/get-dynamic- added-component-values-z4j2si ?file= src%2Fapp%2Ftab-group-basic- example.ts