Материализация для проверки флажков Dynami c - PullRequest
0 голосов
/ 19 марта 2020

У меня есть список флажков, возвращаемых из службы Springboot и сопоставленных таким образом в angular. Я использую материализацию дизайна.

<div class="container" style="padding-left: 60px;">

    <h1>Atender Ticket {{ ticket.id }}</h1>
    <div [hidden]="submitted">
        <form (ngSubmit)="onSubmit()">
            <div class="row">

            <div class="col s6">
                <label for="disabled">Título</label>
                <input required disabled value="{{ ticket.titulo }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Status</label>
                <input required disabled value="{{ ticket.status }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Aplicação</label>
                <input required disabled value="{{ ticket.aplicacao.nome }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Erro</label>
                <input required disabled value="{{ ticket.erro.nome }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Data de Abertura</label>
                <input required disabled value="{{ ticket.dtAbertura | date : 'yyyy-MM-dd' }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Data de Modificação</label>
                <input required disabled value="{{ ticket.dtModificacao | date : 'yyyy-MM-dd' }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Usuario de Abertura</label>
                <input required disabled value="{{ ticket.usuarioAbertura.nome }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s6">
                <label for="disabled">Usuario de Atendimento</label>
                <input required disabled value="{{ ticket.usuarioAtendimento.nome }}" id="disabled" type="text" class="validate">
            </div>
            <div class="col s12">
                <label for="disabled">Descrição</label>
                <textarea required disabled value="{{ ticket.usuarioAtendimento.nome }}" id="disabled" type="text" class="materialize-textarea"></textarea>
            </div>
<div class="col s12">
    <h4>Pendencias</h4>
    <table>
        <thead>
        </thead>
        <tbody>
            <tr *ngFor="let pendencia of ticket.pendencias">
               <input type='checkbox' id="pendencia{{pendencia.id}}" validate="true" required="true" [checked]="pendencia.checked"><label for="pendencia{{pendencia.id}}"> {{pendencia.nome}}</label>
           </tr>
       </tbody>
   </table>

</div>

        </div>



            <div class="input-field">
                <button type="submit" class="btn btn-success">Submit<i class="material-icons right">send</i></button>
            </div>
        </form>
    </div>
    <div class="alert alert-success" role="alert" [hidden]="!submitted">
        <h4>Registro submetido com sucesso!</h4>
    </div>

</div>

Это часть, которую я хочу проверить:

<div class="col s12">
    <h4>Pendencias</h4>
    <table>
        <thead>
        </thead>
        <tbody>
            <tr *ngFor="let pendencia of ticket.pendencias">
               <input type='checkbox' id="pendencia{{pendencia.id}}" validate="true" required="true" [checked]="pendencia.checked"><label for="pendencia{{pendencia.id}}"> {{pendencia.nome}}</label>
           </tr>
       </tbody>
   </table>

</div>

Я хочу проверить на экране и позволить пользователю отправлять только форму когда отмечены все флажки.

Попробовал безуспешно:

validate="true" required="true"

Я искал решение, когда пользователь нажимает кнопку «отправить», поле становится красным, а некоторые появится сообщение «поле обязательно для заполнения».

Можно ли сделать это простым способом?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...