Angular Form 제어 집계

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

Angular NgModel 검증

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

#angular #ngmodel #validation

이전 기사에서는 Angular 양식에서 양식 컨트롤 사용의 가치를 보여주었습니다. 유효성 검사가 가장 중요하고 두 번째로 Angular 아키텍처의 불변 모델로 마이그레이션됩니다.

양식 컨트롤의 집계는 어떻습니까?
모든 자습서에서 양식 컨트롤이 필드 수준 유효성 검사 체계로 도입되었음을 보여줍니다. 사람 개체 정의를 가정합니다.

 class Person{
  lastName:string;
  middleName:string;
  firstName:string;
}

다음과 같이 양식 컨트롤을 생성합니다.

controls = {
  lastName: new FormControl(this.person.lastName, ...),
  middleName: new FormControl(this.person.middleName, ...),
  firstName : new FormControl(this.person.firstName,...)
}

이것은 훌륭하게 작동하지만 각 필드 값을 별도로 설정해야 합니다! 각 변경에서 실행되는 유효성 검사 루틴. 우리는 여전히 그런 일이 일어나기를 원하지만 모든 필드에 응답하는 새로운 사람 개체를 할당하는 것이 더 좋지 않을까요? 한 번 보자:

let fcPerson = new FormControl(this.person);
controls={
  lastName : new FormControl(fcPerson.value.lastName, ...),
  middleName : new FormControl(fcPerson.value.middleName, ...),
  firstName : new FormControl(fcPerson.value.firstName, ...)
}

이렇게 함으로써 우리는 이제 person 객체를 다음과 같이 설정할 수 있습니다. 모든 변화를 파급합니다.

fcPerson.setValue(this.person);

모든 사람 필드를 하나의 개체로 집계 this.person! 또한 GUI 쪽에는 새로운 fcPerson 양식 컨트롤에 대한 참조가 필요하지 않습니다! 그것은 비밀리에 산다.

경고
부적절한 상위 제어 바인딩을 조심하십시오! 다음 예를 들어보세요.

new FormControl(fcPerson.value.lastName <- No Intellisense here

fieldName의 철자를 정확하게 입력하지 않으면(그리고 intellisense가 작동하지 않으면) 결과는 null 값이 됩니다.

JWP2020