유효성 검사를 위해 하위 구성 요소의 양식에 액세스

Question

트리 하위 구성 요소가 포함 된 마스터 구성 요소가있는 각도 2 응용 프로그램이 있습니다.

내 자식 구성 요소 중 하나 (user_input이라고 함)에서 사용자 입력이있는 양식이 있습니다. 내 마스터 구성 요소에 하위 구성 요소의 내 양식이 유효한지 확인해야하는 단추가 있으므로이를 사용 가능하게 설정합니다.

나는 이것을 통해 액세스하려했습니다.

<user_input #usrInput></user_input><button       

[disabled]="!usrInput.formname.form.valid(click)="next()"> 
Next</button> 

(master.view.html에서)하지만 내 USER_INPUT 양식 내가 확인시 초기화되지 않기 때문에 내 주인이는 "유형의 알 수없는"예외가 발생 옴.

이것을 해결할 수있는 영리한 방법이 있습니까? 나는 두 사람이 공유하는 서비스를 가지고 있지만 이것을 위해 이것을 사용하지 않기를 바란다.

미리 감사드립니다.

[업데이트]

내가 ngSwitch 내 자식 요소가 있습니다. 나는 그것을 밖으로 이동하면

<div *ngSwitchCase="0"> 
    <create-user-info></create-user-info> 
    </div> 

    <div *ngSwitchCase="1"> 
    <create-user-services></create-user-services> 
    </div> 

    <div class="col-lg-12" *ngSwitchCase="2"> 
    <create-user-conditions></create-user-conditions> 
    </div> 

</div> 

는 오류가 해결되었습니다. ngSwitch에 있어야하므로 아래에 친절하게 제공된 솔루션을 사용했습니다.

Answer 1

safe navigation operator을 활용할 수 있습니다. 이렇게하면 usrInput이 더 이상 null이 아닌 경우 다음 멤버 만 평가됩니다.

<user_input #usrInput></user_input> 
<button [disabled]="!usrInput?.formname.form.valid" 
     (click)="next()">Next</button>