색인 0에서 빈 입력없이 양식 배열 초기화

Question

현재 각도 2 및 반응 양식을 사용하여 양식을 업데이트, 추가, 삭제 및 편집하고 있습니다. 양식 배열에 입력 컨트롤을 동적으로 추가하기 위해 컨트롤을 폼 작성기 배열로 그룹화했습니다. 이 초기화하려면 항목이없는 빈 폼을 잘 작동합니다.

export class ItemsPage{ 

    collectionForm: FormGroup; 
    get items(): FormArray { return <FormArray>this.collectionForm.get('items'); } 

    constructor(public formBuilder: FormBuilder){ 

     this.pageDetails = this.navParams.data; 

     this.collectionForm = this.formBuilder.group({ 
      items: this.formBuilder.array([this.buildItem()]) 
     }); 
    } 

    buildItem(item?: string): FormGroup { 
     return this.formBuilder.group({ item: [item || '', Validators.required] }); 
    } 

    ionViewDidLoad() { 
     // Builds a form with pre populated items 
     forEach(this.pageDetails, value => { 
      this.items.push(this.buildItem(value)); 
     }) 
    } 
} 

문제 this.pageDetails 값 목록을 가질 때보기 컨트롤의 목록 index 0에서 빈 입력을 포함한다는 것이다. 이 바로 보이지 않는다 그러나

this.items.removeAt(0); 

으로 constructor에서 제거 할 수 있습니다. 내가 그 코드가있는 페이지로 이동하면 어쩌면 내가 그러나 그 formBuilder.array

let prebuildItems = forEach(this.pageDetails, value => { // lodash forEach 
    this.items.push(this.buildItem(value)); 
}); 

this.collectionForm = this.formBuilder.group({ 
    items: this.formBuilder.array([prebuildItems]) 
}); 

의 배열을 만들 수 있다고 생각을 나는 다음과 같은 오류가 발생합니다 :

Error in ./ItemsPage class ItemsPage - caused by: Cannot read property 'get' of undefined

Answer 1

난 그냥 비슷한 문제가 있었다 나는 이렇게 (FormArray에 헤더를 추가하는 것으로) 해결했습니다.

addHeader(name = '', value = '') { 
    // get headers array control from group 
    let headers = <FormArray>this.editForm.controls['options'].controls['headers']; 

    // create new header control 
    let header = this.fb.group({ 
     name: [name, Validators.required], 
     value: [value] 
    }); 

    // set the value on the control 
    // header.setValue({ name, value }); 

    // add the new control to the array 
    headers.push(header); 
} 

처음에는 양식을 채울 때 데이터를 반복하고 헤더를 채 웁니다.

this.data.headers.forEach(h => { 
    this.addHeader(h.name, h.value); 
}); 

나는 내가 섹션에서 여기 Angular Reactive Forms에서 필요한 정보 은 "secretLairs"을 초기화 FormArray

을 발견 나는 생각 나는 어쩌면 당신이 생각하고있는 그

this.formBuilder.array([this.buildItem()]) 

은 배열에 "스키마"를 설정하고 실제로 값이있는 컨트롤이 추가됩니다.