Question

我试图获取隐藏输入的值，该隐藏输入是通过单击insert more按钮来动态添加的。

我尝试在patchValue()函数上使用linkTo()方法，但是没有运气，单击控制台中的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

单击反应形式的按钮中的隐藏输入值

4 个答案: