错误:找不到路径控制:'x' angular 2 [英] Error: Cannot find control with path: 'x ' angular 2

查看：25
本文介绍了错误:找不到路径控制:'x' angular 2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使整个表单中的特定表单字段动态化，以便可以将 x 数量的对象添加到该字段的数组中.但是，每次页面初始化时我都会得到一个

错误:找不到带有路径的控件:'media -> '

这是我的表单.ts

this.cardForm = new FormGroup({'title': new FormControl(cardTitle),媒体:this._fb.array([this.initMedia(),]),链接":新表单组({'新闻':新的FormControl(新闻)，}),初始化媒体(){返回 this._fb.group({类型:新的 FormControl()，原始:新的 FormControl()，主要:新的FormControl()，拇指:this._fb.group({默认值:new FormControl()})})}添加媒体(){const control = this.cardForm.controls['media'];control.push(this._fb.control(['']));}移除媒体(我:数字){const control = this.cardForm.controls['media'];control.removeAt(i);}

这是我的 form.html:

<div class="col-xs-12"><form [formGroup]="cardForm" (ngSubmit)="onSubmit(cardForm.value)"><div class="row"><div class="col-xs-12"><按钮类型=提交"class="btn btn-success">更新卡片<按钮类型=按钮"class="btn btn-danger"(点击)="onCancel()">取消

<div formArrayName="媒体"><div class="row"><div class="col-xs-12"><div class="form-group"><div *ngFor="let media of cardForm.controls.media.controls; let i=index"><span>媒体{{i + 1}}</span><span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>

<div [formGroupName]="i"><div><label>Url</label><md-input-container class="mdcontainer"><input mdInput placeholder="Media Url" type="text" formControlName="raw"></md-input-container>

媒体[]看起来像这样:

媒体:[{原始:'字符串'，主要:布尔值，类型:'字符串'，拇指:{默认值:'字符串'{}]

我在这里遗漏了什么/做错了什么导致该错误出现?任何帮助/提示/建议将不胜感激.

解决方案

[formGroupName]="i" 应该在 *ngFor 内.在这种情况下 i 变量将具有非 undefined 值

<span>媒体{{i + 1}}</span><span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span><div [formGroupName]="i"><div><label>Url</label><md-input-container class="mdcontainer"><input mdInput placeholder="Media Url" type="text" formControlName="raw"></md-input-container>

Plunker 示例

I am trying to make a specific form field in my overall form dynamic so that x amount of objects can be added to the array of that field. However, every time the page inits I get a

Error: Cannot find control with path: 'media -> '

This is my form.ts

this.cardForm = new FormGroup({
  'title': new FormControl(cardTitle),
  media: this._fb.array([
    this.initMedia(),
  ]),
  'links': new FormGroup({
    'news': new FormControl(news),
  }),

  initMedia() {
   return this._fb.group({
   type: new FormControl(),
   raw: new FormControl(),
   primary: new FormControl(),
   thumbs: this._fb.group({
    default: new FormControl()
  })
})
}

addMedia(){
 const control = <FormArray>this.cardForm.controls['media'];
 control.push(this._fb.control(['']));
}
removeMedia(i: number){
 const control = <FormArray>this.cardForm.controls['media'];
 control.removeAt(i);
}

this is my form.html:

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="cardForm" (ngSubmit)="onSubmit(cardForm.value)">
      <div class="row">
        <div class="col-xs-12">
          <button
            type="submit"
            class="btn btn-success">
            Update Card</button>
          <button
            type="button"
            class="btn btn-danger"
            (click)="onCancel()">
            Cancel</button>
        </div>
      </div>

    <div formArrayName="media">
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <div *ngFor= "let media of cardForm.controls.media.controls; let i=index">
              <span>Media {{i + 1}}</span>
              <span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>
          </div>
          <div [formGroupName]="i">
            <div>
              <label>Url</label>
                <md-input-container class="mdcontainer">
                  <input mdInput placeholder="Media Url" type="text" formControlName="raw">
                </md-input-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

And the media[] looks like this: 

media: [
        {
          raw:'string',
          primary: boolean,
          type: 'string',
          thumb: {
                 default: 'string'
                 {
        }
      ]

What am I missing/doing wrong here for that error to come up? Any help/tips/suggestions would be much appreciated.

解决方案

[formGroupName]="i" should be inside of *ngFor. In this case i variable will have non undefined value

<div *ngFor="let media of cardForm.controls.media.controls; let i=index">
  <span>Media {{i + 1}}</span>
  <span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>
  <div [formGroupName]="i">
    <div>
      <label>Url</label>
      <md-input-container class="mdcontainer">
        <input mdInput placeholder="Media Url" type="text" formControlName="raw">
      </md-input-container>
    </div>
  </div>
</div>

Plunker Example

这篇关于错误:找不到路径控制:'x' angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆