Angular 2 Form“无法找到控制路径”

我尝试制作一个动态表单（因此您可以无限添加项目到列表中），但不知何故我的列表内容没有得到发送，因为它无法找到与路径控制：Angular 2 Form“无法找到控制路径”

无法找到路径控制： 'list_items - > LIST_ITEM'

我的组件：

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'] 
}) 
export class ListComponent implements OnInit { 

    listForm: FormGroup; 

    constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder, 
       private listService: ListService) { 
    this.listForm = this.fb.group({ 
     title: ['', [Validators.required, Validators.minLength(5)]], 
     list_items: this.fb.array([ 
     this.initListItem(), 
     ]) 
    }); 
    } 


    initListItem() { 
    return this.fb.group({ 
     list_item: [''] 
    }); 
    } 
    initListItemType() { 
    return this.fb.group({ 
     list_item_type: [''] 
    }); 
    } 

    addListItem() { 
    const control = <FormArray>this.listForm.controls['list_items']; 
    control.push(this.initListItem()); 
    }

模板（list.component.html）：

<h2>Add List </h2> 

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)"> 
    <div class="form-group"> 
    <input type="text" class="form-control" formControlName="title" placeholder="Title"> 
    </div> 

    <div formArrayName="list_items"> 
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default"> 
     {{i + 1}}.) <input type="text" formControlName="list_item" placeholder="List Item" class="form-control"> 
    </div> 
    <a (click)="addListItem()">Add List Item +</a> 

    </div> 

    <button type="submit">Submit</button> 
</form>

标题的工作很好，但我找不到错误我与“formControlName”，这是导致错误。

在此先感谢您对此问题的任何帮助。

什么我改变 list.component.html更新

<h2>Add List </h2> 

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)"> 
    <div class="form-group"> 
    <input type="text" class="form-control" formControlName="title" placeholder="Title"> 
    </div> 

    <div formArrayName="list_items"> 
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default"> 
     {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control"> 
    </div> 
    <a (click)="addListItem()">Add List Item +</a> 

    </div> 

    <button type="submit">Submit</button> 
</form>

而在我的部分，我改变了构造函数和我addListItem方法：

listForm: FormGroup; 

    constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder, 
       private listService: ListService) { 
    this.listForm = this.fb.group({ 
     title: ['', [Validators.required, Validators.minLength(5)]], 
     list_items: this.fb.array([ 
      [''], 
     ]) 
    }); 
    } 

    addListItem() { 
    const control = <FormArray>this.listForm.controls['list_items']; 
    control.push(this.fb.control([''])); 
    console.log(control) 
    }

来源

2016-09-24 dowu

应该被映射formControlName在html表格&您的组件文件。

<div *ngFor="let list_item of [0,1,2]; let i=index" class="panel panel-default"> 

    {{i + 1}}.) <input type="text" formControlName='{{i}}' placeholder="List Item" class="form-control"> 
</div>

============

list_items: this.fb.array([ 
[''], //0 points to this 
[''], //1 points to this 
[''] //2 points to this 
])

来源

2016-09-24 20:01:00 Manish

这难道不是要和我做的尝试，以实现对地干扰？我有我的'initListItem（）'，它返回'list_item'，因此可以动态添加新的表单。你有关于如何实现这一目标的另一个建议？ – dowu

非常感谢你让我朝着正确的方向前进。我会发布我在主帖中更改的内容:)！ – dowu

@dowu其实真棒:) – user776686

我也遇到了这个错误，我通过启动类的变量（元素this.fb.array([])）解决了这个问题。

代码段

mobileNumbers: this.fb.array([this.fb.group(new MobileNumber('IN'))]),

凡类移动电话号码使用。

export class MobileNumber{ 
    public country_code: string; 
    public mobile_number: string; 
    constructor($cc){ 
     this.country_code = COUNTRY_CODES[$cc]; 
    } 
}

要

export class MobileNumber{ 
    public country_code = ''; 
    public mobile_number = ''; 
    constructor($cc){ 
     this.country_code = COUNTRY_CODES[$cc]; 
    } 
}

来源

2017-06-19 12:37:27

Angular 2 Form“无法找到控制路径”

回答

相关问题