0

Tenho um input no Angular Material:

<mat-form-field 
    class="width-layout p-0 col-xs-12 col-sm-4 col-md-4 col-lg-4"
    [class.mat-form-field-invalid]="errorValue" appearance="outline">
    <mat-label [class.input_disabled]="isDisabled">Numero</mat-label>
    <input type="text" [readonly]="read" 
        matInput 
        formControlName="numero" 
        name="numero" 
        id="numero" 
        placeholder="numero" 
        (change)="valida($event.target.value)" />
</mat-form-field> 

Onde ele só fica habilitado quando clica em um checkbox, caso o checkbox esteja ativado, ele pode alterar o valor inicial, se caso esteja desativado, o input fica desabilitado com o valor inicial.

Quando clico pra habilitador o input, coloco valor lá, e depois desabilito, volta pro valor normal, mas quando eu habilito de novo, o input volta pro valor anterior que eu coloquei, e nao zera.

Tentei deixar o input vazio assim:

if (checked === true) {
  this.couponForm.controls.numero.enable();
  (document.getElementById('numero') as HTMLInputElement).value = '';
}

Ele ate fica sem valor, mas quando passo o mouse no input ele já mostra o valor anterior, e não o input com o valor vazio como deveria ser.

5
  • 3
    Pq não faz um property binding no input pra poder controlar melhor isto?
    – LeAndrade
    Commented 16/12/2019 às 18:33
  • @LeAndrade poderia me dar um exemplo de como usar no meu problema?
    – Maria
    Commented 16/12/2019 às 18:39
  • 1
    Precisaria ver como está o TS, só com estes código não tem como ter uma ideia.
    – LeAndrade
    Commented 16/12/2019 às 18:44
  • @LeAndrade entendi, mas acabei de usar e nao funcionou. Depois que coloco um valor e desabilito e habilito de novo, vai o valor que digitei no input, e nao o que alterei no ts
    – Maria
    Commented 16/12/2019 às 19:02
  • Precisaria ver como estão os código como disse, pq se fez o property binding no input, na função de click do checkbox bastaria apenas zerar os valores da propriedade que fez binding.
    – LeAndrade
    Commented 16/12/2019 às 19:17

1 Resposta 1

3

Olá.

Pelo que eu vi você esta trabalhando com ReactForms, isso é bom. Então vamos a resposta:

1º Mudei a responsabilidade do "change" Para o CheckBox:

<mat-checkbox formControlName="checkbox"  [checked]="true" (change)="change($event.checked)" >Check me!</mat-checkbox>

2º Alterei a função e agora caso toda vez que o CheckBox estiver true o input é habilitado, se false o input volta para o valor " " e desabilita o input do formulario.

change(checked: any){
    if(checked){
      this.form.controls['numero'].enable();
    } else if(!checked){
    this.form.controls['numero'].setValue('');
    this.form.controls['numero'].disable();
    }
  }

Caso Tenha alguma duvida é só falar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .