在 Angular Reactive 表单中使用表单注册控制时遇到问题 [英] Getting issue in registering contorl with form in Angular Reactive forms

问题描述

我正在研究 Angular Reactive 表单.最初我在formgroup中有一个formarray.之后我将 formgroup 推入 formarray 以动态添加表单控件.使用 formControlName 绑定这些控件时出现问题.我收到此错误:无法通过路径找到控件:'controlArray -> 0 -> value'

这是我的组件类代码:

ngOnInit(){this.reviewForm = this.fb.group({'controlArray': new FormArray([])});this.showDefaultForm();}

首先我在 formsDb 中获取数据，然后我搜索它以获得最后设置的默认表单.

showDefaultForm(){for(let 形式的 this.formService.formsDb){if(form.formName==this.formService.defaultForm.formName){this.selectedForm = 表单；this.addForm();}}}添加表单(){for (让控制this.selectedForm.controlsArr){(<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group([{controlType: control.controlType,标签:control.label，价值: ''}]));}}

这是我的模板代码:

<div class="example-label"><span class='block'><div formArrayName="controlArray"><div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index"><div [formGroupName]="i"><表格><tr><span *ngIf="control.value"><td><label>{{control.value.label}}</label></td><td><span *ngIf="control.value.controlType == 'select'"><md-select placeholder="{{control.value.label}}" formControlName="value"><md-option *ngFor="let option of control.value.options; let j=index"[value]="option">{{control.value.options[j]}}</md-option></md-选择></span></td><td><span *ngIf="control.value.controlType == 'text'"><md-form-field class="example-full-width"><input mdInput type="text" placeholder="{{control.value.placeholder}}" formControlName="value" ></md-form-field></span></td></span></tr>

</span>

</表单>

我的模板代码有问题吗，请帮忙.谢谢

解决方案

我觉得问题出在addForm函数上，当你push group时，你不需要用括号创建它作为一个数组，类似这样:

 addForm(){for(让控制this.selectedForm.controlsArr){(<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group({controlType: control.controlType,标签:control.label，价值: ''}));}}

I am working on Angular Reactive forms. Initially I have an formarray in formgroup. afterwards I push formgroup into formarray to add form control dynamically. I am getting an issue when binding these control using formControlName. I am getting this Error: Cannot find control with path: 'controlArray -> 0 -> value'

here is my component class code:

ngOnInit(){
        this.reviewForm = this.fb.group({            
            'controlArray': new FormArray([])
        });        
        this.showDefaultForm();                     
    }

First I am getting data in formsDb, then I am searching into it to get the last set default form.

showDefaultForm(){
        for(let form of this.formService.formsDb){
            if(form.formName==this.formService.defaultForm.formName){
                this.selectedForm = form;
                this.addForm();
            }
        }     
    }


addForm(){            
        for (let control of this.selectedForm.controlsArr){                              
            (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group([{
                controlType: control.controlType,
                label: control.label,               
                value: ''
            }])); 
        }        
    } 

Here is my template code:

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>               
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <div [formGroupName]="i">
          <table>
            <tr>
              <span *ngIf="control.value">
                  <td> 
                    <label>{{control.value.label}}</label> 

              </td>
              <td><span *ngIf="control.value.controlType == 'select'">                
                    <md-select placeholder="{{control.value.label}}" formControlName="value">
                      <md-option *ngFor="let option of control.value.options; let j=index" 
                      [value]="option">{{control.value.options[j]}}</md-option>                  
                    </md-select>
                  </span></td>
              <td> <span *ngIf="control.value.controlType == 'text'">
            <md-form-field class="example-full-width">
              <input mdInput type="text" placeholder="{{control.value.placeholder}}" formControlName="value" >
            </md-form-field>  
        </span></td>                           
              </span>
            </tr>
          </table>
        </div>
      </div>      
    </div>
    </span>
  </div>
</form>

Is there some issue in my template code, Please help. Thanks

解决方案

i think the problem is in the addForm function, when you push the group, you no need create it with brackets as an array, something like that:

   addForm(){
      for (let control of this.selectedForm.controlsArr) {
        (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group({
          controlType: control.controlType,
          label: control.label,
          value: ''
        }));
      }
    }

这篇关于在 Angular Reactive 表单中使用表单注册控制时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！