중첩 된 폼의 각도 2 확인

Question

3 개의 구성 요소가있는 폼이 있습니다. 다음은 양식의 html입니다.

<div class="p-r-0 m-t-1 p-r-half p-l-half"> 
    <div class="tab-content">   
     <div *ngIf="vitalsData != null"> 
      <emp-info *ngIf="far == '1'" [(dataContext)]="empData"></emp-info> 
      <emp-work *ngIf="sections == '2'" [(dataContext)]="empData"></faa-ch145> 
     </div> 
    </div> 
    <div class="right pull-top pos-relative"> 
      <button class="btn btn-primary" type="button">Reset</button> 
      <button class="btn btn-primary" type="button">Save</button> 
    </div> 
</div> 

두 가지 구성 요소 emp-info와 emp-work가 있습니다. emp-info 및 emp-work 페이지에는 몇 가지 필수 필드가 있습니다. 이제는 필요한 필드를 저장하면 유효성을 검사해야합니다. 하지만 하위 구성 요소 및 부모 구성 요소의 저장 단추에 필수 필드가 있습니다. 누구든지 하위 구성 요소의 필드에 대한 오류를 확인하고 표시 할 수있는 방법을 알려 주시기 바랍니다.

Answer 1

각도 Forms은 구성 요소 내부를 확인하지 않습니다. 유효성을 검사하려면 emp-info | emp-work 구성 요소는 ControlValueAccessor을 구현해야합니다. 따라서 Angular는 사용자 정의 구성 요소 (모든 기능을 갖춘 FormControl)로 작동 할 수 있습니다.

사용자 지정 구성 요소가 컨테이너 일 때 더 적합한 다른 옵션은 FormGroup 인스턴스를 전달하고 내부 양식 컨트롤을 연결하는 것입니다. 이 주제에 대한 각도의 설명서를 확인하십시오 DynamicFormQuestionComponent이 FormGroup 인스턴스를 수신하는 방법

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#question-form-components

알 수 있습니다.

Answer 2

emp-work 및 emp-info는 FormControl으로 생성됩니다. 그런 다음 양쪽에 FormGroup을 넣으십시오. 객체 팩토리 내부에서 Validators.required 또는 그 중 하나의 속성을 사용할 수 있습니다.