Angular NgModel : 모델, ViewModel 및 파이프

오늘의 초점은 ngModelChange 이벤트입니다. 이 이벤트는 ngModel directive 의 @Output 이벤트입니다.

아래 코드는 도시를 선택하기 위해 선택 요소를 사용하고 있습니다. 사용자에게 제공되는 옵션은 주어진 주의 모든 도시 목록입니다.

선택 요소에 대한 바인딩은 다음과 같습니다.

  // the ngModel traid for 2 way data binding
  #city="ngModel"
  [(ngModel)]="address.city"
  (ngModelChange)=
    "address.city = onPropertyChange(city)"

  onPropertyChange(city) {
      return city.viweModel;    
   }

#city,[(ngModel)] 및 (ngModelChange)의 트라이어드는 양방향 바인딩을 허용합니다. onProperyChange가 실행되면 city라는 이름의 ngModel이 표시됩니다.

입력 컨트롤이 처음 로드되면 ngModel이 address.city 속성에 바인딩됩니다. address.city의 기본값은 "정의되지 않음"입니다. 사용자가 선택하면 NgModel에 대해 표시됩니다.



뷰모델

'viewModel'은 현재 변경 사항을 노출합니다. 컨트롤의 값 속성에 있는 값과 동일하며 항상 해당 값을 추적합니다.

"컨트롤"이 Angular FormControl의 자동 인스턴스입니다.

control.value 속성으로 이동하는 것보다 'viewModel' 속성을 사용하는 것이 더 쉽습니다.

모델

위의 이미지에서 "모델"속성에 대해 "정의되지 않음"값을 볼 수 있습니다. 모델 속성은 항상 바인딩에 대해 알려진 "마지막"값입니다. 문제가 발생한 경우 변경 사항을 되돌리는 좋은 방법입니다.

파이프 사용

ngModelChange는 항상 파이프보다 먼저 실행됩니다. 여기에 'cityPipe'라는 파이프를 추가합니다.

  #city ="ngModel"
  [ngModel]="address.city | cityPipe"
  (ngModelChange)=
    "address.city=
       onPropertyChange(city)"  

#city는 ngModel 인스턴스 값이 있는 컨트롤의 이름입니다.

onPropertyChange 함수를 사용하면 address.city 할당 값을 반환하기 전에 다른 작업을 수행할 수 있습니다.

address.city 값이 onPropertyChange 함수에서 반환된 값이 됩니다.

onPropertyChange가 반환된 후; 명명된 파이프
cityPipe가 호출됩니다.

Note: Don't set address.city in the onChange function as it will cause an endless loop of onChange events. Rather set address.city as shown above.

파이프를 통한 변경은 NgModel Change 이벤트를 다시 발생시키지 않습니다! 이렇게 하면 address.city의 실제 값이 표시된 사후 파이프 작업과 다를 수 있습니다. 이는 보기에서 값을 숨기는 데 특히 유용합니다.

다음 단계: ngModel과 함께 유효성 검사 패턴 사용.

JWP2020 모델 뷰모델 ngModel 바인딩