사용자 지정 양식 컨트롤을 모눈 2의 부모 폼 유효성 검사에 연결

Question

최근 각도 2를 사용하여 사용자 지정 양식 컨트롤을 만들려고했습니다. 사용자 지정 컨트롤에는 2 개의 입력이 있어야하며 기존 구조를 가진 기존 개체를 편집해야합니다. 내가 사용하는 형태로 사용자 정의 제어 양식 유효성 검사를 연결하는 방법을 그것은 언급하지 않았다 가이드를 제외하고 괜찮 일 Guide For Writing custom form controls

예를 들어 :

class model { 
    public fieldOne: number; 
    public fieldSec: number; 
} 

나는 내가 여기에있는 좋은 설명을 따라 .

사용자 정의 컨트롤 템플릿은 다음과 같이 어떻게 든 같습니다 :

<form> 
    <input [(ngModel)]="existingModel.fieldOne"> 
    <input [(ngModel)]="existingModel.fieldSec" required> 
</form> 

그리고 우리는 값이 기존 모델을 편집하는 데 사용

{ 
    fieldOne: 20, 
    fieldSec: undefined 
} 

그리고 우리를 는 간단한 예를 살펴 수 있습니다 이 모델을 편집 할 수있는 사용자 정의 컨트롤이 필요한 내 응용 프로그램의 일부 양식에서 사용하십시오.

<form #formVar="ngForm"> 
    <my-custom-control [(ngModel)]="existingModel" required> 
    </my-custom-control> 
</form> 

이런 종류의 예제는 모델을 편집 할 수 있다는 점에서 내 앱에서 작동합니다. 문제는 양식이 유효하지 않을 때 사용자에게 보여주고 자하고, formVar.valid를 보면 existingModel.fieldSec이 정의되어 있지 않고 사용자 정의 컨트롤 양식에 필요한 유효성 검사가 있어도 true입니다.

Answer 1

정확하게 사용자 정의 컨트롤이 어떻게 동작하는지 모르지만, 다음 솔루션은 구성 요소 자체를 동적으로 컴파일하는 경우에도 유효합니다.

템플릿 구동 양식 (자신의 것과 같은)의 시나리오에서도 기본 엔진은 여전히 ​​반응성 구성 요소 (FormGroup 및 FormControl)를 악용하여 작동합니다. 따라서 항상 프로그래밍 방식으로 그룹 및 자식 컨트롤의 계층 구조를 변경하여 변경 내용을 예상대로 전파 할 수 있습니다.

이

<form #formVar="ngForm"> 
<my-custom-control [entity]="existingModel" [form]="formVar"> 
</my-custom-control></form> 

구성 요소 템플릿과 같아야합니다 :

@Input('form') peerForm : NgForm; 
@Input('entity') model : any; 

이 나서보기에 바인딩을 설정합니다 당신은 수 - - 인스턴스의 NgForm 수락 사용자 지정 컨트롤에 대한 다른 사람의 사이에서 속성을 노출

구성 요소의 코드에서 다시

<div> 
<input [(ngModel)]="model.fieldOne" #ctrl1="ngModel"> 
<input [(ngModel)]="model.fieldSec" required #ctrl2="ngModel"> 
</div> 

그리고, :

@ViewChild('ctrl1') ngModel1 : NgModel; 
@ViewChild('ctrl2') ngModel2 : NgModel; 
... 
ngAfterViewInit(){ 
    // assuming the form does exist (TODO: check if set here) 
    this.peerForm.control.addControl('entity_fieldOne', this.ngModel1.control); 
    this.peerForm.control.addControl('entity_fieldSec', this.ngModel2.control); 
} 

충분합니다. 여기에 플랭커를 참조하십시오 : https://plnkr.co/gb3XroZNoGuZa05e76X0