时间戳

首页 > 解决方案 > “找不到路径控制”但无法弄清楚原因 - Angular 5

angular - “找不到路径控制”但无法弄清楚原因 - Angular 5

问题描述

我正在尝试构建一个嵌套的反应形式，但如此挣扎。

我检查了这个例子和这个例子，并提出了如下代码，但总是得到错误“找不到路径控制：'four_six_doc_multi_group -> document_txt_sub'”

谁能帮我吗？非常感谢！

我的表格：

let form = new FormGroup({
  sevenzerozeroInfoForm : this.formBuilder.group({
    pre_adv_ref : '',
    lc_currency :'',
    lc_amount :'',
    issue_date : '',
    four_six_doc_multi_group: this.formBuilder.array([this.create46DocMulti()])
  })
},
{updateOn: 'blur'}
)

create46DocMulti(){
  return this.formBuilder.group({
    document_code: '',
   document_txt_sub : this.formBuilder.array([this.formBuilder.control('')])
})}

我的HTML：

<div [formGroup]="sevenzerozeroInfoForm">
  <div class="form-group" formArrayName="four_six_doc_multi_group">
          <div *ngFor="let doc of four_six_doc_multi_group.controls; let i=index">
              <div [formGroupName]="i">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">46A Documents Required (Code).{{i+1}}</label>
                            <input type="text" class="form-control" formControlName="document_code">
                        </div>
                    </div>
                </div>
              </div>
              <div formArrayName="document_txt_sub" *ngFor="let document_txt of
                                            getDocument_txt(i).controls; let j=index">
                <div [formGroupName]="j" >
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="control-label">46A Documents Required.{{i+1}}.{{j+1}}</label>
                                <input type="text" class="form-control" formControlName="document_txt_sub">
                            </div>
                        </div>
                    </div>
                </div>
              </div>
          </div>
      </div>
    </div>

get four_six_doc_multi_group(){
    return this.sevenzerozeroInfoForm.get('four_six_doc_multi_group') as FormArray;
  }

  getDocument_txt(index){
    return ((<FormArray>this.sevenzerozeroInfoForm.get('four_six_doc_multi_group')).controls[index].get('document_txt_sub')) as FormArray;
  }

标签： angularnested-formsangular-reactive-forms

解决方案

您应该按如下方式更改此行：

 document_txt_sub : this.formBuilder.array([this.formbuilder.group({
      document_txt_sub: ''
  }])

因为在您的模板中您要声明 a [formGroupName]="j"，但在您的表单数组中您只创建一个控件，这就是这里的问题。您应该用表单组包装表单控件

推荐阅读