Angular 2 Form "Nie można znaleźć kontroli za pomocą ścieżki"

Question

Próbuję utworzyć dynamiczną formę (aby można było nieograniczone dodawanie elementów do listy), ale w jakiś sposób zawartość mojej listy nie jest wysyłana, ponieważ nie może znaleźć kontrola ze ścieżką:

nie można znaleźć kontrolę ze ścieżką: 'list_items -> list_item'

Moja komponent:

@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()); 
    } 

Szablon (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> 

Tytuł działa dobrze, ale nie mogę znaleźć błędu, który mam z "formControlName", który powoduje błąd.

Z góry dziękuję za pomoc w tym wydaniu.

Aktualizacja z tym, co zmieniło 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> 

I w moim składnika Zmieniłem konstruktora i moją metodę 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) 
    } 

Answer 1

Nie powinno być odwzorowany w formControlName Formularz html & Twój plik komponentu.

<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 
]) 

Answer 2

ja również napotkał ten błąd, a ja rozwiązać ten problem poprzez inicjowanie zmiennych klasy (elementy w this.fb.array([])).

Code Snippet

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

Gdzie klasa numer telefonu komórkowego służy.

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

Aby

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