javascript - touched - ng forms angular 6




Angular 2: Submissão de formulário cancelada porque o formulário não está conectado (6)

Caso o envio do formulário seja acompanhado pela destruição do componente, o envio do formulário falhará na condição de corrida com a remoção do formulário do DOM. Diga, nós temos

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

Se saveData é assíncrono (por exemplo, salva os dados via chamada de API), então podemos aguardar o resultado:

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

Se você precisar abandonar o formulário imediatamente, uma abordagem de atraso zero também deve funcionar. Isso garante que o destacamento DOM esteja no próximo loop de eventos após o envio do formulário ser chamado:

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

Isso deve funcionar independentemente do tipo de botão.

Eu tenho um modal que contém um formulário, quando o modal é destruído recebo o seguinte erro no console:

Envio de formulário cancelado porque o formulário não está conectado

O modal é adicionado a um elemento <modal-placeholder> que é um filho direto de <app-root> , meu elemento de nível superior.

Qual é a maneira correta de remover um formulário do DOM e se livrar desse erro no Angular 2? Eu atualmente uso componentRef.destroy();


Então, na verdade, encontrei exatamente o mesmo problema hoje, exceto sem um modal envolvido. Na minha forma, tenho dois botões. Um que envia o formulário e um que, quando clicado, encaminha de volta para a página anterior.

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

Clicar no primeiro botão com o routerLink faz exatamente o que é suposto, mas também aparentemente tenta enviar o formulário também, e então tem que abandonar o envio do formulário porque a página em que o formulário estava é desmontada do DOM durante o envio.

Esta parece ser exatamente a mesma coisa que está acontecendo com você, exceto com um modal em vez de toda a página.

O problema se torna fixo se você especificar diretamente o tipo do segundo botão para ser algo diferente de enviar.

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

Então, se você estiver fechando o modal por meio de um botão 'Cancelar' ou algo do tipo, especificar o tipo desse botão, como mostrado acima, deve resolver o problema.


Eu tive esse problema recentemente e event.preventDefault() funcionou para mim. Adicione ao seu método de evento de clique.

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

submitForm(event: Event) { event.preventDefault(); ... }


Eu vejo isso no Angular 6, mesmo sem nenhum botão de envio. acontece quando existem vários formulários no mesmo modelo. Não tenho certeza se há uma solução / qual é a solução.


No elemento form você precisa definir o método submit (ngSubmit), algo como: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

e no botão enviar você omitir o método de clique, porque seu formulário agora está conectado ao método de envio: <button class="btn btn-success" type="submit">Save</button> O botão deve ser do tipo de envio.

No código por trás do componente, você implementa o método "onSubmit", por exemplo, algo assim: onSubmit(value: ICurrency) { ... } Este método está recebendo um objeto de valor com valores dos campos de formulário.


Pode haver outras razões para isso ocorrer, mas no meu caso eu tinha um botão que era interpretado pelo navegador como um botão de envio e, portanto, o formulário era enviado quando o botão era clicado causando o erro. Adicionando type = "button" corrigiu o problema. Elemento completo:

    <button type="button" (click)="submitForm()">




angular-forms