Angular Form 컨트롤과 ngModels는 섞이지 않습니다

새로운 발견
대신 ngModel을 사용하십시오!

Angular NgModel 검증

존 피터스 ・ 2020년 9월 24일 ・ 1분 읽기

#angular #ngmodel #validation

Angular에 따르면 discussing the ngModel and FormControls .

ngModel과 FormControl이 섞이지 않음

Use with ngModel is deprecated
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and is scheduled for removal in a future version of Angular.

낙진
이는 입력 요소에 대한 파이프(HTML 측에서) 사용이 더 이상 작동하지 않음을 의미합니다. StackOverflow의 대부분의 콘텐츠는 두 가지를 함께 사용하는 수많은 예제를 보여줍니다. 하지 마세요.

하지만 왜?
나는 그들의 내부 아키텍처 토론을 알지 못하지만 변경 불가능한 아키텍처의 물결이 자리를 잡았을 것으로 예상합니다.

양식 컨트롤을 사용하면 불변성 패턴으로 이동하게 됩니다. 한때 바인딩에 사용했던 모델은 이제 FormControl로 대체되었습니다. 모델 자체는 특정 워크플로에서 두 번만 설정됩니다. 시작할 때 한 번, 해당 컨트롤에 대한 콘텐츠를 유지하려고 할 때 다시 한 번만 설정됩니다.

변경 가능한 모델 아키텍처는 현재 Angular 아키텍처 트렌드의 외부에 있습니다.

해결책은 무엇입니까?
파이프는 좋은 생각이었습니다. 다른 구성 요소에 대한 유효성 검사 및 형식 지정을 제어할 수 있었습니다. 실제로 FormControl은 해당 기능의 일부를 겹쳤습니다. 그러나 양식 컨트롤을 사용하는 경우 파이프를 우회할 수 있습니다.

FormControl 변경 이벤트 핸들러

문자열 값으로 입력된 SSN 번호가 있는 입력 요소를 가정하고 모델은 디스플레이와 다른 값을 가집니다. 모델은 유효한 경우 숫자일 뿐이며 디스플레이에는 숫자에 대시가 표시되거나 이와 같은 해시 문자열이 표시됩니다.

111
111-
111-22
111-22-3
111-22-3333

//or 

###-##-####

//model only winds up as
11122333
// or a semaphore such as 
0, -1, 999

파이프 교체

this.formGroup
  .controls.ssn.valueChanges
  .subscribe((value) => { 
     // do something with every change
     // no keyup event handlers needed 
}

이벤트 처리기는 표시되는 데이터의 유효성 검사 및 변경을 담당합니다. 반면 모델은 유효한 경우에만 변경 사항을 유지하는 데 사용됩니다!

워크플로우
- 세마포어 기반의 해시 태그로 FormControl을 초기화합니다.

모든 FormControl 변경 사항은 파이프와 동일한 작업을 수행하지만 컨트롤의 각 변경 사항에 연결됩니다.

모든 것이 유효할 때까지 값이 변경될 때까지 양식 컨트롤 값이 SSN 번호 형식으로 변경되어 모델이 업데이트됩니다.

팁
다음과 같이 변경 이벤트 처리기에서 스택 오버플로 문제를 방지합니다.

if (newFormat === change) return;
this.formGroup
  .controls.ssn
  .setValue(newFormat);

newFormat은 사용자가 입력할 때 대시를 삽입합니다. 문제는 우리가 setValue를 사용할 때마다 다른 변경 사항을 발생시킨다는 것입니다! 우리는 죽음의 소용돌이를 멈추고 newFormat을 한 번만 설정해야 합니다. newFormat이 변경 사항과 동일하면 반환합니다!