单击反应形式的按钮时获取隐藏的输入值答案

【问题标题】：get hidden input value on click of button in reactive forms angular单击反应形式的按钮时获取隐藏的输入值
【发布时间】：2020-04-08 14:18:38
【问题描述】：

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

这里是 stackblitz 链接：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 的值为空。

【问题讨论】：

那是因为<input type="hidden" formControlName="selectedLinkTo" />即使点击getValue button也没有任何价值

标签： angular typescript angular-reactive-forms angular-forms hidden-field

【解决方案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")
  }
}

这将用于验证。

【讨论】：

让我试试这个！
没问题，如果您发现任何问题，请告诉我。
另外，有什么方法可以设置验证吗？
您可以使用此 this.formGroup.controls["form Control Name"].setValidators(Validators.required); 添加动态验证。检查此链接stackoverflow.com/a/43604037/4452091
我试过但没有工作。看到这个：stackblitz.com/edit/get-dynamic-added-component-values-qgky91

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

请用上面的代码替换你的linkTo函数。

【讨论】：

【解决方案4】：

您可以像这样传递表单并设置控件值。

<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

希望这会有所帮助。

【讨论】：