2017-12-22 14 views
1

여러 가지 일을하는 대신 양식 컨트롤 배열을 구독 할 수있는 방법이 있습니다. 내 시나리오에서 이미지와 같이 개체가 나타납니다. enter image description here textfielda, textfieldb 및 numbera valuechanges 때 구독 싶습니다. 전체 양식 (잘 작동하는) valuechanges 구독을 시도했지만 비용이 많이 드는 작업이므로이 해결하려면 모든 해결 방법이 있습니다.이 필드는 동적이므로 사용할 수 없습니다. ngmodel 도움이 되었습니까?양식 컨트롤의 배열에 대한 구독 - 각도 2/4

+1

Observable.merge'. 다음은 몇 일 전 FormArray의 특정 요소에 valueChanges를 가져 오는 것에 대한 예제입니다. 필요한 부분을 수정하고 얻을 수 있다고 생각합니다. https://stackblitz.com/edit/formarraything –

+0

따라서 올 방법이 없습니다. 상자에서 각도. 당신의 접근 방식을 더 깊이 설명해 주시겠습니까 – dockerrrr

+1

예. 목표는 FormArray의 특정/단일 요소에 valueChanges를 가져 오는 것입니다. FormArray ValueChanges에 가입하면 전체 Array가 기록됩니다. FormArray이기 때문에 FormControl을 동적으로 추가하고 제거 할 수 있습니다. 이런 이유로 각 컨트롤을 forEach로 가져와서 control.valueChanges를 observableArray에 푸시해야합니다. 마지막으로 formArray.valueChanges를 observableArray로 밀어 FormArray에서 변경 사항을 가져온다. 그런 다음 Observable.merge를 사용하여 모든 valueChanges를 병합 한 다음 변경시에만 값을 가져 오는 distinctUntilChanged를 사용합니다. –

답변

0

이것은 내 코드에서 복사하여 편집 한 것입니다.

newFormArray.push(this.fb.group({ 
    datatype: datatype, 
    value: value 
})); 

은이 DB를에 연결된 백엔드 API 호출의 값은 다음과 같습니다

내 양식 배열의 모든 형태의 그룹은 dataype 있습니다.

당신이 지금 할 것은 다음 HTML에서

this.form.valueChanges.subscribe((item: any) => { 
    if(item.array[i].datatype === 'textarea'){ //do something 
    switch (item.array[i].datatype) { // or with a switch 
     case 'textarea': 
      //do textarea 
      break; 

년 OFC :

당신은 여전히`사용 후 각각의 컨트롤은 다음 배열에 자신의`valueChanges`를 추가 얻을 필요 것
<div *ngIf="item.datatype === 'textarea'"> // show textarea