Início / coding / Perguntas / 79090553
Accepted
Reegan
Asked: 2024-10-15 23:01:24 +0800 CST

Validação de formulário reativo angular para campo dinâmico durante o envio

  • 772

Estou usando o formulário reativo com campo dinâmico (nome do produto). Posso lançar erro de validação se o formulário for enviado sem preencher o nome do produto.

Mas quando clico no botão Adicionar, o erro "Insira o nome do produto" aparece para cada nova entrada (formControlName="productname"). Também dei o link do stackblitz. Alguém pode fornecer uma solução https://stackblitz.com/github/reegan2024/mygithubrepo?file=src%2Fapp%2Fapp.component.htmlinsira a descrição da imagem aqui

angular

1 respostas

  1. Best Answer

    Ao enviar, para mostrar todos os erros, use o método markAllAsTouched.

    onSubmit(formvalue: boolean) {
  this.productFormarray.markAllAsTouched();
  if (formvalue == true) {
    this.openDialog();
  }
}

    Como você quer que a mensagem de erro seja exibida somente quando a entrada for tocada, você pode ajustá-la para *ngIfser exibida somente quando ela for tocada. Isso elimina a complexidade de verificar o formulário submittede reduz a quantidade de código HTML, para maior legibilidade.

        <div
      *ngIf="productdetailsarray.at(i).get('productname')?.touched"
      style="font-size: 10pt; margin-top: 2pt; color:red;"
    >
      ...
    </div>

    Demonstração do Stackblitz

    • 1

relate perguntas