Кнопка отключения Angular4, если форма json-schema недействительна

У меня есть регистрационная форма, построенная с более чем 1 формой json-schema.

У меня есть основные данные, которые должен заполнить участник, и у меня есть 2 частичные формы, которые являются динамическими. Эти 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>

Итак, теперь у меня есть 2 формы json-schema, одна для информации о мероприятии, другая для информации о билетах. Я хотел бы отключить кнопку отправки, поэтому в моей кнопке отправки я хочу отключить кнопку, если форма схемы не заполнена. Однако, исходя из моего кода, даже если я заполняю все поля формы, кнопка всегда отключена. Правильно ли я делаю отключающую часть?

Спасибо.


typescript angular angular-schema-form
person leo277    schedule 12.10.2017    source источник
comment
Пожалуйста, опубликуйте также свой код component.ts.   -  person Bunyamin Coskuner    schedule 12.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

попробуйте проверить эти два и отключить кнопку

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

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