以反应形式点击按钮获取隐藏的输入值 angular

Question

我正在尝试获取通过单击 insert more 按钮动态添加的隐藏输入的值。

这里是 stackblitz link：get hidden input value

我尝试在 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")
 }
}

要添加新行，还要在此处添加

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

linkTo 函数 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