2017-10-12 6 views
0

하나 이상의 json-schema-form으로 작성된 등록 양식이 있습니다.json-schema-form이 유효하지 않은 경우 Angular4 비활성화 버튼

참가자가 기입해야하는 기본 세부 정보가 있으며 동적 인 2 개의 부분 양식이 있습니다. 이 두 양식은 관리자가 양식의 매개 변수를 설정 한 경우에만 나타납니다.

 <div class="registration-form"> 
     <json-schema-form [model]="participantEventInfo" [schema]="json_custom_form" (isValid)="isEventFormValid($event)" (onChanges)="updateParticipantEventInfo($event)"></json-schema-form> 
     <json-schema-form [model]="participantTixInfo" [schema]="json_tix_custom_form" (onChanges)="updateParticipantTixInfo($event)" (isValid)="isTixFormValid($event)"></json-schema-form> 
     <button type="submit" [disabled]="!participantEventInfo.isValid && !participantTixInfo.isValid" (click)="updateEventandTixInfoRegistration()">Update</button> 
    </div> 

이제는 json-schema-form이 2 개 있는데, 하나는 이벤트 정보이고 하나는 티켓 정보입니다. th 제출 버튼을 비활성화하고 싶습니다. 제출 버튼에서, buttton을 비활성화하려면 스키마 양식 중 하나가 채워지지 않아야합니다. 그러나 내 코드를 기반으로 모든 양식 필드를 채우더라도 단추는 항상 비활성화됩니다. 사용 중지 부분을 올바르게 처리하고 있습니까?

감사합니다.

+0

게시주십시오 component.ts 코드를 확인해보십시오. –

답변

0

뿐만 아니라이 두 및 해제 버튼을

<button type="submit" [disabled]="!checkForm()" click)="updateEventandTixInfoRegistration()">Update</button> 

checkForm(){ 
    if(document.forms[0].checkValidity() && document.forms[1].checkValidity()){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
}