[Po-dynamic-form] Possibilidade de ativar o componente "po-field-container-bottom" quando necessario

[matiasdanielz]

Descrição da melhoria

Adicionar um metodo ou forma de ativar a div "po-field-container-bottom" quando necessario.

Caso de uso

Estou usando a propriedade [p-validate] após alteração de um campo cpf para validar se o cpf preenchido ja existe no banco de dados do Protheus, porém, não encontrei uma maneira de ativar esta mensagem de erro quando desejado. Visto que a propriedade "errorMessage" do po-dynamic-form so é ativado em caso de erros de mascara, minValue e maxValue, segue documentação:

Exemplo de uso: Após preenchimento do campo cpf é chamado o [p-validade] chamando uma API do protheus que fara a validação se o CPF ja existe e retornara a resposta para o typescript que precisa ativar o "po-field-container-bottom" em caso de o campo estar com erro.

Informações adicionais

Caso exista alguma forma nativa de fazer uma chamada de metodo para ativar este componente ficaria feliz em saber da existencia do mesmo, desde ja agradeço.

Pensamos na possibilidade de usar poNotificationService, porém, como teremos inumeras telas com dezenas de campos cadastrais, gostariamos de apresentar a mensagem de erro campo a campo.

[jcorrea97]

@matiasdanielz nesse caso que você precisa realizar uma chamada na api para validar os dados você pode usar o ReactiveForm do Angular que possui essa possibilidade, deixei um exemplo de uso:

https://stackblitz.com/edit/angular-ivy-r5dzge?file=src%2Fapp%2Fservices%2Fauth.service.ts

[matiasdanielz]

@jcorrea97 por favor me corrija se eu tiver entendido errado, mas nesse exemplo que voce deu eu teria que "reescrever" esta validação para cada campo da minha tela ?

Como estarei usando diversos po-dynamic-form para dezenas ou ate centenas de campos com diversas validações diferentes, seria necessario usar o ReactiveForm do angular para validar cada campo ?

Desde ja agradeço sua atenção

[jcorrea97]

@matiasdanielz O exemplo que deixei realmente talvez não seja ideia para a sua aplicação, vamos avaliar para realizar essa melhoria.

[matiasdanielz]

Consegui "BURLAR" o POUI fazendo o seguinte:

1 - Ativei a propriedade "p-validate" do "po-dynamic-form" chamando uma função toda vez que é realizada a troca de campo. 2 - Dentro da função "onChangeFields" chamo uma API passando o campo alterado e o novo valor. 3 - Pego a resposta da API informando se o campo esta validado ou não.

Em caso de campo não validado:

• Seto a propriedade maxValue como -1, visto que nenhum cpf/cep/numero de telefone/whatsapp pode ser negativo, sendo assim a mensagem de erro sempre ira aparecer em caso de campo não validado.
• Passo a mensagem de erro recebida no body da response da API para a propriedade errorMessage do campo alterado.

Em caso o campo validado:

• Excluo a propriedade "maxValue"
• Excluo a propriedade errorMessage".

Segue exemplo:

Observação: No momento consegui burlar o PO e aparentemente a aplicação esta funcionando corretamente, mas acredito que seria interessante a possibilidade de fazer isso nativamente com o POUI, visto que, o componente "po-dynamic-form" possui as propriedades:

• p-validate
• p-validade-fields
• p-validate-on-input.

Novamente peço desculpas caso eu esteja falando bobagens e realmente de para fazer algo semelhante nativamente.

[jcorrea97]

@matiasdanielz que bom que você conseguiu achar uma forma de fazer, mas de qualquer maneira vamos tentar analisar uma melhor forma de implementar no PO-UI essa melhoria.

[jnrpalma]

Olá @matiasdanielz recomendo abrir essa solicitação através do JIRA, Como abrir uma issue para o THF.