1

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>

0 Answers0