Angular 2 warning Form submission canceled because the form is not connected - angular2-routing

I have this error when i submit form in angular 2
Form submission canceled because the form is not connected
None other posts help me to resolve my question. I have two pages one have a form. When submit this form and reload a page use this code
this.router.navigate(['/tipoquestionariolist']);
The ngOnInit work get the data but the screen not apears data and on console say that message.
Html form show bellow
<form ngForm #formulario="ngForm" (ngSubmit)="salvar()" >
<md-input-container class="col-sm-12" >
<input mdInput placeholder="Denominação" [(ngModel)]="tipoQuestionario.denominacao" required name="denominacao" type="text"#denominacao="ngModel">
</md-input-container>
<label class="col-sm-12" >Extinto</label>
<md-radio-group class="col-sm-12" [(ngModel)]="tipoQuestionario.extinto" name="extinto" >
<md-radio-button [value]="true" >
Sim
</md-radio-button>
<md-radio-button [value]="false" >
Não
</md-radio-button>
</md-radio-group>
<br>
<button type="submit" md-raised-button title="Editar" color="primary" [disabled]="!formulario.form.valid">
<md-icon>save</md-icon> Salvar
</button>
<button md-raised-button (click)="novo()" color="primary">
<md-icon>refresh</md-icon> Limpar
</button>
<div>
<br>
<button md-raised-button (click)="voltar()" color="primary">
<md-icon>arrow_back</md-icon> Voltar
</button>
</div>
</form>
and the table
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="col-sm-1">#</th>
<th class="col-sm-9" >Denominação</th>
<th class="col-sm-2 text-center" >Ação</th>
</tr>
</thead>
<tbody *ngIf="(lista | async)?.length > 0">
<tr *ngFor="let row of pagerComponent.pagedItems">
<td>{{row.id}}</td>
<td>{{row.denominacao}}</td>
<td class="text-center">
<button md-raised-button class="button-small" title="Editar" color="primary" (click)="editar(row.id)">
<md-icon>create</md-icon>
</button>
<button md-raised-button class="button-small" color="warn" title="Excluir" (click)="itemSelecionado = row" data-toggle="modal" data-target="#modalExcluir" >
<md-icon>delete</md-icon>
</button>
</td>
</tr>
</tbody>
<tbody *ngIf="(lista | async)?.length == 0">
<tr>
<td colspan="4" style="text-align: center"><p>Nenhum registro encontrado</p></td>
</tr>
</tbody>
</table>

Related

How to insert multiple checkbox values into firebase using vue js

I've a form that contains a textarea and a table with a list of many members (from a collection named Members). Each table's contain two checboxes: one to mark the presence of the member and the second one to mark his payment. After clicking on the submit button I'd like to have in my firebase database something like this:
Meeting collection:
associationId,
textareaValue,
createdAd
Presence collection:
memberId,
meetingId,
present: true or false,
createAt
Payment collection:
memberId,
meetingId,
payment: true or false,
createAt
<form #submit.prevent="handleSubmitNewMeeting">
<!-- step one -->
<div class="card" v-if="showFormPart1">
<div class="card-header">
<h4>Entrer le sujet principal de la réunion</h4>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" v-model="subjects" required rows="3"></textarea>
</div>
<p></p>
<div class="row">
<div class="col-sm-6">
<button #click="showForm=false" class="btn btn-danger" style="width: 100%">
Annuler
</button>
</div>
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=true;
showFormPart1=false;">
Suivant
</button>
</div>
</div>
</div>
</div>
<p></p>
<!-- step two -->
<div class="card" v-if="showFormPart2">
<div v-if="members">
<div class="card-header">
<h4>Cocher les présences et payements</h4>
</div>
<div class="card-block p-0">
<table class="table table-bordered">
<thead class="">
<tr align="center">
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Téléphone</th>
<th scope="col">Présence</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id" align="center">
<td>{{ member.memberFirstname }}</td>
<td>{{ member.memberLastname }}</td>
<td>{{ member.memberPhoneNumber }}</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="present">
<span class="slider round"></span>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="payment">
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
<p></p>
<div class="row">
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=false;
showFormPart1=true;">
Précédent
</button>
</div>
<div class="col-sm-6">
<button class="btn btn-secondary"> Valider </button>
</div>
</div>
</div>
</div>
</div>
<p></p>
</form>
How to do these with firebase using Vue Js please ? thanks !

DataTables - Disable Smart Search

I searched the documentation, but when applying it to my api it didn't work... I need to disable DataTables smart search. Insert "smart": false at startup as below:
var table = $('table#tbitens').DataTable({
"ajax" : "/api/v1/get/itens/dtItem?baixado=" + baixado,
"deferRender": true,
"processing": true,
"serverSide" : true,
"destroy": false,
"scrollX": "100%",
"scrollY": "50vh",
"scrollCollapse": true,
"stateSave": true,
select: {
style: 'single'
},
"search": {
"smart": false
},
Imagem do sistema de busca
In the search button I tried these two ways, the one commented on and the one on the top line, but without success. If anyone can help, I appreciate it, I'm new in the area and I'm still in the learning process. Trying to solve this task since Monday.
//Botão pesquisar
$('#btnPesquisarItem').on('click', function(){
var otable = $('#tbitens').DataTable();
var collection = $("input.column_filter");
collection.each(function() {
if ($(this).val().trim() != ''){
otable.columns($(this).parents('tr').attr('data-column')).search("^" + $(this).val() + "$", true, false, true).draw();
// original: otable.columns($(this).parents('tr').attr('data-column')).search($(this).val().trim());
}
});
HTML
<div class="tab-content" id="tabConteudo">
<!-- FILTROS -->
<div class="tab-pane fade" id="pesquisar" role="tabpanel" aria-labelledby="pesquisar-tab">
<div class="table-responsive p-2">
<div class="row">
<form id="formitens" class="form-horizontal" method="POST" style="margin: 10px">
<div class="col-sm-4">
<table style="width: 67%; margin: 0 auto 2em auto;">
<tbody>
<tr id="filter_col0" data-column="1">
<td>Empresa</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
</tr>
<tr id="filter_col1" data-column="2">
<td>Filial</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
</tr>
<tr id="filter_col2" data-column="3">
<td>Item</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
</tr>
<tr id="filter_col3" data-column="4">
<td>Agregado</td>
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
</tr>
<tr id="filter_col4" data-column="5">
<td>Chapa</td>
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
</tr>
<tr id="filter_col5" data-column="6">
<td>Descrição</td>
<td align="center"><input type="text" class="column_filter" id="col6_filter"></td>
</tr>
<tr id="filter_col6" data-column="7">
<td>Conta</td>
<td align="center"><input type="text" class="column_filter" id="col7_filter"></td>
</tr>
<tr id="filter_col7" data-column="8">
<td>Classe</td>
<td align="center"><input type="text" class="column_filter" id="col8_filter"></td>
</tr>
<tr id="filter_col8" data-column="9">
<td>Centro</td>
<td align="center"><input type="text" class="column_filter" id="col9_filter"></td>
</tr>
</tbody>
</table>
</div>
</form>
<div class="col-sm-4">
<button type="submit" id="btnPesquisarItem" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Pesquisar
</button>
<button type="button" id="btnLimparPesquisa" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span> Limpar pesquisa
</button>
</div>
</div>
</div>
</div>
<!-- ITENS -->
<div class="tab-pane fade show active" id="itens" role="tabpanel" aria-labelledby="itens-tab">
<div class="table-responsive p-2">
<div class="panel-header p-1">
<div class="row">
<div class="col-sm-1">
<a class="tip btn btn-sm btn-success" data-container="body" data-toggle="popover" data-content="Insere um novo item" th:href="#{/itens/add/}"
sec:authorize="hasAnyAuthority('Administrador', 'Aquisições')">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="col-sm-4" sec:authorize="hasAnyAuthority('Administrador', 'Movimentações')">
<select id="movimentacoes" autofocus="autofocus">
<option value="" disabled selected>Selecione um item para movimentar</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="verBaixados">
<label class="form-check-label" for="exampleCheck1">Exibir Itens Baixados</label>
</div>
</div>
</div>
</div>
<table id="tbitens" class="table table-sm table-hover table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Empresa</th>
<th>Filial</th>
<th>Item</th>
<th>Agregado</th>
<th>Chapa</th>
<th>Descrição</th>
<th>Conta</th>
<th>Classe</th>
<th>Centro</th>
<th:block th:each="area : ${areasConts}">
<th th:text="#{general.cost} + ' ' + ${area.descricao}">Custo</th>
<th th:text="#{general.depreciation} + ' ' + ${area.descricao}">Depreciação</th>
</th:block>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Form Validation with font awesome icons inside ng-repeat

Good Afternoon,
I'm having a problem trying to get my font awesome icons to work as expected, I have a shopping cart where hardware can be ordered, an address field is provided for each item so the user can send hardware to different locations, as each location is provided I want the icon to change from a cross to a tick, I'm using AngluarJS form validation:
Problem I have is the icon only changes when the last address is entered, I'm sure I need to use an $index or something like it but can't figure it out:
Here is my code...
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:55%;">${Product} </th>
<th style="width: 1%;">${Quantity}</th>
<th style="width: 24%;">${Delivery Address:}</th>
<th style="width: 1%;"></th>
<th style="width: 19%;"><span style="visibility: hidden;">${Item Controls}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 visible-lg"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="{{item.name}}" class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h2 class="nomargin h4">{{item.name}}</h2>
<p class="hidden-xs">{{item.short_description}}</p>
{{item.sys_id}}
</div>
</div>
</td>
<td data-th="Quantity">
<input type="number"
title="${Quantity}"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="20"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
<td class="col-md-12 text-right">
<button title="Edit" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" aria-label="${Edit Item} {{item.name}}" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-edit"></i></button>
<button title="Remove" class="btn btn-danger btn-sm" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
Lines of interest:
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
Images Attached:
Cart OnLoad
Last Address Changed
Any help and I would be grateful
Found the solution here:
How to validate inputs dynamically created using ng-repeat, ng-show (angular)
Updated Code:
<td>
<select ng-model="address" name="address{{$index}}" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm['address' + $index].$dirty" class="fa fa-check-circle" style="color:#008000;"> {{myForm.address.$dirty}}{{fieldUpdated}}</i>
<i ng-show="myForm['address' + $index].$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;"> {{myForm.address.$pristine}}</i>
</td>

Angular Ui bootstrap dropdown split-button issue with table

I have an angular app , and have integrated angular-ui-bootstrap , my issue is that the dropdown links are are being blocked by table row , using z-index :
<div class="panel panel-default">
<div class="panel-body">
<div class=" pull-right">
<!-- Split button -->
<div class="btn-group invoice_new_item_btn_ul" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger"> Add Item </button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="invoice_new_item_btn_ul uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped" >
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>Type</th>
</tr>
</thead>
<tbody id="search_result">
<tr class="odd gradeX" ng-repeat="u in vm.patient.patient_finance_item">
<td></td>
<td ng-bind="u.item_name"></td>
<td ng-bind="u.item_type"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The css/sass :
.invoice_new_item_btn_ul{
z-index:1000 !important;
}
uib-dropdown-menu only works as an attribute, not a class, which is why your drop down menu is not displaying.
https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L285-L287

Accordion-toggle not working on IE 11 (bootstrap 3)

Below Pasted Code is working great on Chrome and Firefox but latest IE versions are not showing accordion-toggle collapse.
Chrome and FF Screenshot : https://drive.google.com/file/d/0BwCdx1TYINUsQjIwdnlhVDN5eGM/view?usp=sharing
How it appears on IE:
https://drive.google.com/file/d/0BwCdx1TYINUsajE5eExicmlaejg/view?usp=sharing
<div class="panel-collapse" collapse="!client.isDaySelected">
<div class="panel-body container-fluid">
<div class="col-lg-12">
<div class="panel panel-default" >
<div class="panel-heading">Select Goal/Allowable services for Data Collection</div>
<div class="panel-body">
<div class="pull-right">
<button type="button" class="btn btn-default btn-md" ng-click="">Absences</button>
<button type="button" class="btn btn-default btn-md" ng-click="hospitialization()">Hospitialization</button>
</div>
<br />
<div style="overflow-x:scroll;width:100%;">
<table class="table table-condensed table-responsive" style="border-collapse: collapse;">
<thead>
<tr>
--table headers
</tr>
</thead>
<tbody ng-repeat="service in serviceDetails">
<tr>
<td>
<button data-toggle="collapse" data-target="#tr_{{service.ResHabOutId}}" class="accordion-toggle btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
-- some more tds
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="tr_{{service.ResHabOutId}}" ng-if="service.lstDataCollectionSummary.length">
<table class="table table-striped" style="outline: 1px solid black;">
<thead>
--some rows
</thead>
<tbody>
--some rows
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
If you notice I have ng-repeat on tbody ( for Simplicity) because I want to display data on per goal basis.
If needed I can paste in the links and js references for your review.
Any help ?

Resources