angular 동적 폼 제작

원본 코드:https://github.com/Karin001/ngx-dynamic-form

동적 폼 사용 필드
때때로 우 리 는 유연 한 폼 이 필요 합 니 다.이 폼 은 사용자 의 선택 이나 서버 가 돌아 오 는 정보 에 따라 재 설정 할 수 있 습 니 다.예 를 들 어 input 요 소 를 추가 하거나 삭제 하 는 등 입 니 다.
이러한 상황 에서 처음부터 템 플 릿 에 모든 폼 을 쓰 고 ngif 트 리 구 조 를 이용 하여 선택 통 제 를 하면 프로그램 이 지루 해 집 니 다.
이때.프로그램 은 사용자 의 선택(driven by configuration)이나 서버 의 응답 에 따라 필요 한 폼 을 자동 으로 생 성 하 는 것 이 좋 습 니 다.이것 이 바로 동적 폼 이 처리 해 야 할 업무 다.
구성 요소 생 성 관련 개념 구성 요소 의 두 가지 구성
폼 을 동적 으로 생 성 하려 면 구성 요소 가 어떻게 생 성 되 는 지 이해 해 야 합 니 다.
하나의 angular 구성 요 소 는 두 부분 으로 구성 되 어 있다.
Wrapper
Wrapper 는 구성 요소 와 상호작용 을 할 수 있 습 니 다.Wrapper 초기 화가 완료 되면 구성 요 소 를 예화 할 수 있 습 니 다.또한 구성 요소 의 change detection 과 트리거 갈고리 함수,예 를 들 어 ngOnInit,ngOnChanges 를 책임 집 니 다.
View
View 는 렌 더 링 된 템 플 릿 을 보 여 주 며 구성 요소 의 외 모 를 보 여 주 며 Wrapper 의 change detection 을 촉발 합 니 다.하나의 구성 요 소 는 여러 개의 view 를 가 질 수 있 습 니 다.모든 view 는 angular 가 제공 하 는 두 개의 함 수 를 호출 하여 자체 적 으로 생 성 하고 소각 할 수 있 습 니 다.이 과정 은 상단 의 보기 로 참여 하지 않 습 니 다.
구성 요소 의 일반 로드 방식(비 동적 로드 방식)
일반적으로,우 리 는 구성 요 소 를 루트 구성 요소 나 다른 구성 요소 에 삽입 해서 사용한다.끼 워 넣 은 구성 요 소 를 하위 구성 요소 라 고 하고 끼 워 넣 은 것 을 부모 구성 요소 라 고 합 니 다.이 때 하위 구성 요소 코드 가 컴 파일 될 때 구성 요소 공장 component factory(이것 은 angular 핵심 클래스 Component Factory 의 인 스 턴 스)와 hsot view,host view 는 이 구성 요소 가 부모 구성 요소 보기에 서 이 구성 요소 의 dom 노드 를 생 성하 고 이 구성 요 소 를 생 성 하 는 wrapper 와 view 를 책임 집 니 다.
동적 로드 모듈
동적 구성 요 소 를 구성 요소 보기 에 삽입 하려 면 이 동적 구성 요소 의 인 스 턴 스 를 얻 을 수 없습니다.이것 은 비 동적 구성 요소 컴 파일 러 가 하 는 일 이기 때 문 입 니 다.
동적 구성 요소 구현
angular 는 위의 어 려 운 문 제 를 해결 하 는 함 수 를 제공 합 니 다.이 함 수 를 사용 하려 면 두 개의 대상 을 주입 해 야 합 니 다.

constructor(
 private componentFactoryResolver: ComponentFactoryResolver,
 private viewcontainerRef: ViewContainerRef,
 ) {
  
 }

우 리 는 Component Factory Resolver 와 View Container Ref 를 주입 했다.
Component Factory Resolver 에 서 는 하나의 방법(resolve Component Factory()을 제공 합 니 다.이 방법 은 하나의 구성 요소 류 를 매개 변수 로 받 아들 여 이 구성 요소 류 를 기반 으로 하 는 구성 요소 공장 을 만 듭 니 다.즉,우리 가 전에 언급 한 그 구성 요소 공장 입 니 다.
View Container Ref 는 구성 요소 공장 을 매개 변수 로 받 아들 여 하위 구성 요 소 를 만 드 는 방법(createComponent()을 제공 합 니 다.(제 개인 적 인 이 해 는 host view 가 하 는 일 을 처리 하여 구성 요소 에 wrapper 와 view 를 만 들 었 다 는 것 입 니 다)
동적 폼 구현
위의 글 은 동적 구성 요 소 를 실현 하 는 기술 을 간략하게 소개 하 였 으 며,지금 은 동적 폼 을 어떻게 만 드 는 지 생각 하기 시작 하 였 다.
구체 적 인 사고 방향.
우 리 는 독립 된 동적 폼 모듈 을 만 들 고 싶 습 니 다.동적 폼 을 사용 하려 면 이 모듈 을 간단하게 도입 하고 조금 만 설정 하면 사용 할 수 있 습 니 다.
우 리 는 이 모듈 이 완 성 된 후에 꼭대기 층 사용자 의 측면 에서 이런 작업 절차 가 되 기 를 바란다.

우 리 는 입력 속성 을 가 진 구성 요 소 를 쉽게 만 들 수 있 습 니 다.문 제 는 이 구성 요소 가 입력 속성 에 따라 우리 가 원 하 는 폼 을 어떻게 만 드 느 냐 하 는 것 입 니 다.
즉,자신 이 Component Factory Resolver 와 View Container Ref 를 호출 하여 구성 요소 의 동적 생 성 을 하 는 지,아니면 다른 사람 에 게 맡 기 는 지 하 는 것 이다.
다음 그림 은 사고방식 을 실현 하 는 것 이다.

실제로 우 리 는 동적 폼 을 작은 동적 구성 요소 로 나 누 었 다.Component Factory Resolver 와 View Container Ref 를 호출 하여 구성 요 소 를 만 드 는 이 논 리 는 외부 용기 에 통합 되 지 않 고 사용자 정의 명령 과 ng-container 에 전달 되 었 습 니 다.명령 이 보기 가 없 기 때문에 그 는 View Container Ref 를 주입 하여 숙주 의 보기 용 기 를 얻 었 다.ng-container 가 렌 더 링 되 지 않 기 때문에 가 져 온 보기 용 기 는 외부 구성 요소 용기 의 보기 용기 입 니 다.
이렇게 처리 하 는 장점 은 외부 구성 요소 가 각 분 리 된 동적 구성 요 소 를 통일 적 으로 관리 하지 않 아 도 되 고 동적 구성 요소 가 스스로 관리 하 는 것 과 같다 는 것 이다.
외부 구성 요소 용 기 는 아래 와 같 습 니 다.

<form>
 <ng-container *ngFor="let config of configs" [     ] >
 </ng-container>
</form>

configs 는 사용자 의 설정 데이터 입 니 다.사용자 정의 명령 은 ng-container 에 깃 들 고 config 에 따라 각자 의 동적 구성 요 소 를 보 여 줍 니 다.ng-container 는 투명 합 니 다.
코드 디 렉 터 리 구 조 를 보 세 요.마지막 으로 이 럴 거 예요.

이상 은 대체적으로 사고 방향 을 실현 하 는 것 이다.구체 적 으로 많은 세부 사항 들 이 글 에서 처음에 언급 한 두 편의 글 에 관심 을 가지 고 상세 하 게 말 할 수 있다.