입력 요소에 대한 Angular NgModel 내부

주어진 거리 주소에 대한 입력입니다.

 <input
  id="street"
  name="street"
  #street="ngModel"
  [(ngModel)]="address.street"
  (ngModelChange)="onPropertyChange($event, street)"
  required
  minLength="1"
  placeholder="Enter Street Here"
  type="text"
 />

지난 기사에서 우리는 위와 같이 NgModel 구성에 대한 적절한 패턴을 보여주었습니다.

오늘 우리는 ngModelChange에 초점을 맞춥니다.

  #street="ngModel"
  [(ngModel)]="address.street"
  (ngModelChange)=
    "onPropertyChange($event, street)"

#street, ngModel 및 ngModelChange의 세 가지 요소를 통해 ngModel 내부를 열 수 있습니다. onPropertyChange 핸들러는 ngModel을 보여줍니다.

   onPropertyChange($event, street: ngModel) {
      debugger;       
   }

흥미로운 점은 "$event"변수가 현재 변경 사항을 보여준다는 것입니다. 하지만; "street"변수는 "NgModel"이기 때문에 훨씬 더 많은 정보를 가지고 있습니다. 우리는 $event가 필요하지 않습니다.

Ng모델


NgModel에는 자동으로 생성된 FormControl, 모델 및 viewModel과 "요소"의 이름이 포함됩니다. 다른 문서에서 논의할 다른 속성이 있습니다.

변경 사항은 다음을 사용하여 쉽게 볼 수 있습니다.

모델과 뷰모델

// the change to be made
let change = ngModel.viewModel;
// the prior value
let prior = ngModel.model;

유효한 아직?

// use the ngModel valid function
let valid = ngModel.control.valid;

주의

id 특성은 반드시 필요한 것은 아니며 이 컨트롤이 동일한 페이지에서 재사용되는 경우 문제를 일으킬 수 있습니다.

리팩토링 버전

ID 또는 $event가 없습니다...

 <input
  name="street"   
  #street="ngModel"
  [(ngModel)]="address.street"
  (ngModelChange)="onPropertyChange(street)"
  required
  minLength="1"
  placeholder="Enter Street Here"
  type="text"
 />

결론

이와 같이 NgModel을 사용하면 더 이상 명시적인 Form Group 및 Form Control을 사용할 필요가 없습니다. Reactive 양식 및 양식에 대한 혼란입니다.

JWP2020 NgModel 내부