Desabilitar / Habilitar componentes quando tiver alterando

Boa noite, Guilherme! Como vai?

Poste aqui um exemplo do que tentou fazer (tanto do HTML do componente quanto do TS do mesmo). Daí eu dou uma olhada e procuro te ajudar!

Grande abraço e bons estudos!

HTML, pois o TS coloquei no primeiro post

<form class="formulario-form" #f="ngForm" (ngSubmit)="onPesquisar(f)">
<mat-form-field class="formulario-full-width">
            <mat-select placeholder="Município integrado" name="entidadeId" disabled="alterarRegistro "
              [(ngModel)]="empresaBuscar.entidadeId" 
              matTooltip="Deve selecionar um município integrado" ng-required>
              <mat-option>Nenhum</mat-option>
              <mat-option *ngFor="let entidade of entidades" 
                [value]="entidade.id">{{entidade.municipio.ibgeNome}}
              </mat-option>
            </mat-select>
          </mat-form-field>
</form>

Boa tarde, Guilherme! Como vai?

Eu falei sobre o TS pq eu precisava ver toda a estrutura do seu componente para poder opinar melhor e não somente o ngOnInit(). Em todo caso, veja se utilizando a property bind no atributo disabled resolve o seu problema.

<mat-select [disabled]="alterarRegistro">
</mat-select>

Mas o valor do componente é passado para o JAVA ?

Se não me engano no HTML, tive este problema.

Não entendi sua pergunta, Guilherme. Que Java é esse que vc está falando?

A property bind é utilizada justamente para pegar o valor da sua variável alterarRegistro que está no arquivo TS do seu componente.

O componente quando está disabled, ele passa o valor que está vinculado para a camada servidor, quando eu acionar o serviço ?

Desabilitado ou não o componente irá enviar o valor padrão dele. Se vc não definiu nenhum então não será enviado nada. O atributo disabled é usado apenas para evitar interação do usuário.

Não funcionou Gabriel.

Na alteração o componente marcado com [disabled], chega nulo no servidor.

Boa noite, Guilherme! Como vai?

Desabilitado ou não o componente irá enviar o valor padrão dele. Se vc não definiu nenhum então não será enviado nada. O atributo disabled é usado apenas para evitar interação do usuário.

Vc chegou a definir um valor padrão para o componente de seleção que vc está utilizando? Se não definiu, então chegar um valor nulo no servidor é exatamente o que deveria acontecer, afinal de contas o seu componente está desabilitado e por isso o usuário não selecionou nenhum valor.

Então, quando clico em alterar um registro, ele busca no banco de dados e preenche os componentes da tela.

Quando clico em salvar, ele já apaga o valor do componente e chega no Back-end vazio.

O campo é texto.

Quando o sistema era em HTML, sem ser angular, tivemos este problema.

Usamos se não me engano o read.

Guilherme, quando vc clica no botão de alterar o seu formulário já deve ser preenchido automaticamente com os valores do item selecionado para alteração. Se vc não preencher o formulário com esses valores (inclusive com o componente de seleção), ao clicar no botão de salvar será enviado um valor nulo para o back-end justamente como está acontecendo.

Pegou a ideia? Qualquer coisa é só falar!

Então, o que eu disse no último post. Vc leu ?

Quando clico em alterar ele preenche os componentes do formulário, corrretamente.

Quando clico em salvar ele envia todos as informações, menos os que estão com disabled.

Entendeu ?

Opa, Guilherme! Eu fiz um exemplo prático que vc pode acessar aqui. Ao clicar no botão enviar, veja que todos os valores são exibidos no console do navegador mesmo com o campo de seleção estando desabilitado. Nesse link vc tbm poderá ver o código fonte e que é algo bem parecido com o seu código original.

Ou seja, com esse exemplo, vc pode perceber que o problema pelo qual o tópico foi aberto é resolvido da forma como falei anteriormente. O que está acontecendo agora é outro problema sendo gerado por alguma coisa que não o fato do componente estar desabilitado.

Algumas possibilidades são:

• O formulário não está sendo preenchido corretamente como vc acha por algum problema no bind entre os dados da sua classe TS e do HTML;
• Os dados não estão sendo enviados corretamente para o back-end por algum erro na sua classe TS.

Para eu poder te ajudar a encontrar o problema no seu código, precisarei do código da classe TS completo de modo que eu possa dar uma olhada no que está acontecendo.

Grande abraço e bons estudos!

Entendo que aqui está igual, mas aqui não funciona.

<input matInput placeholder="Login *" name="login" [(ngModel)]="usuario.login" [textMask]="{mask: cpfcnpjmask}" matTooltip="Login do usuário" maxlength="20" disabled]="alterarRegistro">

Imagens

Antes de clicar em salvar

Clicando em salvar

Back end

Entendeu ?

Guilherme, o trecho de código que vc passou no último comentário está incorreto! Não é disabled]="alterarRegistro" e sim [disabled]="alterarRegistro".

Além disso, o fato do valor estar chegando nulo no back-end pode ser acarretado por vários motivos, dentre os quais eu citei alguns em meu último comentário.

Importante ressaltar que se quiser que eu te ajude nisso basta que siga a orientação que te dei tbm no meu último comentário. Caso contrário, infelizmente, não terei como te ajudar.

Grande abraço!

Correto.

Mesmo assim, não funciona.

<input matInput placeholder="Login *" name="login" 
[(ngModel)]="usuario.login" [textMask]="{mask: cpfcnpjmask}" matTooltip="Login do usuário" maxlength="20" [disabled]="alterarRegistro">

Códigos solicitados estão aqui.

Código ts https://gist.github.com/guilhermecostalopes/c332025424f4f602a45af30f9ce4cc53

Código html https://gist.github.com/guilhermecostalopes/6dc60637393d9ffbf1602ffa984ba86d

Mesmo assim, não funciona.

Eu não esperava que funcionasse. Como já foi demonstrado o erro não está no disabled. Eu só te alertei para um problema no código que vc postou.

Seguindo em frente, o código que vc mandou tem uma série de decisões questionáveis que podem ou não estar influenciando nesse comportamento inesperado. Fora boas práticas que não estão sendo seguidas.

Mas vou tentar isolar o problema. Para isso, altere a classe UsuarioFormComponent da seguinte forma:

Na linha 88, altere para:

console.log('alterar');
console.log(this.usuario);

Na linha 158, antes de fechar o método preencherFormulario(), acrescente:

console.log('preencherFormulario');
console.log(this.usuario);

Altere a linha 177 para:

console.log('onSubmit');
console.log(this.usuario);

Depois navegue até o formulário para edição de algum registro e clique no botão de enviar. Daí cole a saída do console do navegador na sua próxima resposta para que eu possa analisar.

P.S.: Por se tratar de um novo problema, o ideal é que vc abra um novo tópico para não misturar os assuntos! Daí é só mandar o link do novo tópico aqui que eu apareço lá!

Grande abraço!

Gabriel, conforme solicitado, segue o novo post: https://cursos.alura.com.br/forum/topico-outro-erro-em-desabilitar-habilitar-componentes-quando-tiver-alterando-61974

Blz, Guilherme! Vamos continuar por lá!