实现以验证动态复选框

Question

我有一个列表列表，这些复选框从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"

我一直在寻找一种解决方案，当用户单击“提交”按钮时，该字段将变为红色，并且会显示一些消息，提示“必填字段”。

是否可以通过简单的方式进行？