У меня есть список флажков, возвращаемых из службы 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"
Я искал решение, когда пользователь нажимает кнопку «отправить», поле становится красным, а некоторые появится сообщение «поле обязательно для заполнения».
Можно ли сделать это простым способом?