앵귤러 폼과 리액티브 폼

지난 1년 동안 명시적인 Angular Form 및 Reactive Forms 코딩이 다음과 같이 거의 완전히 대체될 수 있다는 결론에 도달했습니다.

Angular NgModel : 모델, ViewModel 및 파이프

존 피터스 ・ 2020년 9월 26일 ・ 2분 읽기

#angular #typescript

양식 및 반응형

우리가 이러한 구성을 선택할 때 우리는 지저분한 상용구 코드로 가득 차 있습니다. 뿐만 아니라 코드 내에서 양방향 바인딩을 구현합니다.

이는 이러한 두 가지 유형의 유효성 검사 코딩 구현에 문제가 있음을 나타냅니다. 우리는 이 모든 보일러 플레이트 작업이 나쁜 코드 냄새라는 것을 처음부터 알았어야 했습니다. 작동했던 것이 지금은 더 이상 사용되지 않는 것으로 간주됩니다!

대신 ngModel을 사용해보십시오

위 기사에서 설명한 대로 ngModel을 사용하여 자동으로 생성된 폼 컨트롤의 모든 장점을 얻습니다. 더 이상 보일러 플레이트 코드가 없습니다.

ngModel의 3가지 방식에 익숙해지면 사용이 간편해집니다.

#controlName 매개변수를 추가하고 ngModel 값을 할당합니다.

#controlName = "ngModel"

PropertyName이 Typescript 코드에 있는 ngModel에 양방향 바인딩 구문을 사용합니다.

[(ngModel)] = 'propertyName'

이와 같이 변경 이벤트 처리기를 연결합니다.

(ngModelChange)='propertyName = onPropertyChanged(controlName);

onPropertyChange에서 viewmodel을 반환합니다.

onPropertyChanged(ngModel){
 // can spin off asynchronous task here
 // the viewModle property is always the proposed change
 return ngModel.viewModel;
}

기사에서 파이프도 작동한다고 지적했듯이 파이프는 마지막으로 실행되고 다른 변경 사항을 생성하지 않습니다!

예, formBuilder 및 formControl 배열 개념도 역사입니다.



경고: 모든 모델이 유효한지 감지해야 하는 경우 ngModel은 이를 제공하지 않습니다. 이 경우 Forms 및 Reactive Forms를 사용하십시오.

JWP2020 FormControls는 죽지 않았습니다