2017-10-30 3 views
1

텍스트 편집기와 같은 간단한 편집기에 바인딩 할 수있는 Angular Dynamic Form을 설정하려고하지만 바인딩 할 수있는 항목의 목록을 노출합니다. 그리드. 예를 들어 Order와 Items가 있습니다.Angular 2 데이터 격자를 Angular 4 FormArray에 바인딩하는 방법

각도 동적 양식은 "실제"개체에서 채워지는 변경 내용 추적 모델을 만듭니다. 주문 항목의 예에서 각 항목은 FormGroup으로 만들어지고 FormArray에 추가됩니다.

간단한 컨트롤에 바인딩 할 때이 모든 것이 의미가 있으며 실행하기 쉽지만 주문 항목을 데이터 격자에 바인딩해야합니다. 이것은 매우 일반적인 시나리오처럼 보입니다. 그러나 나는 이것에 대한 언급을 막 어디서나 볼 수 있습니까? 추천 패턴을 따르지 않을 수도 있습니다.

데이터 격자 (이 경우 Clarity VMWare)를 FormGroup 항목에 바인딩 할 수 있습니까?

텍사스

답변

1

내가 형태로 그룹 내에서 추상 컨트롤의 값을 얻어서 항목을 나타내는 형태로 그룹 각각에 결합 할 수 있음을 알아 낸 내 자신의 질문에 대답하려면 :

<clr-dg-row *ngFor="let item of orderItems" [clrDgItem]="item"> 
<clr-dg-cell>{{ item.get('code').value }}</clr-dg-cell> 
<clr-dg-cell>{{ item.get('value').value }}</clr-dg-cell> 
</clr-dg-row> 

item.get ('controlName')이 컨트롤 그룹에서 컨트롤을 가져오고 .value가 현재 값을 검색하는지 궁금한 경우. 항목 목록은 다음과 같이 구성 요소에 표시됩니다.

get orderItems(): AbstractControl[] { 

    return (this.orderForm.get('items') as FormArray) 
     .controls; 
} 
+0

이 값만 표시됩니다. 폼 컨트롤을 편집하는 것에 대한 질문이 아닙니까? 또한 이것은 Clarity와는 아무런 관련이 없습니다. –