-1

Sou iniciante na programação e estou querendo entender como faço para desabilitar por exemplo 3 input utilizando o checkbox. meu checkbox está ssim:

<!--Checkbox-->
<div>
   <input type="checkbox" id="dhcp" name="dhcp" class="box" />
     <label for="checkbox">
       DHCP
     </label>
</div>

Aqui, estou colocando apenas 1 input referente ao IP dos 3 existente que são Mascara e gateway. Abaixo, o código do meu input:

<!--Input IP-->
<mat-form-field>
   <mat-label class="temp"> IP </mat-label>
  <input
    type="number"
    placeholder="Digite seu IP"
    aria-label="number"
    name="ip"
    value=""
    matInput
    [formControl]="formControlIP"/>
  <mat-error *ngIf="formControlIP.hasError('required')">
   {{ Campo requirido }}
  </mat-error>
</mat-form-field>

1 Resposta 1

0

Corrigindo seu HTML fica assim:

<!--Checkbox-->
<div>
  <label>
    <input
       type="checkbox" id="dhcp" name="dhcp" class="box" 
       [checked]="inputDisabled" (change)="inputDisabled = !inputDisabled" />
    DHCP
  </label>
</div>
  • Você pode clicar na label quando ela fica em volta do input.
  • Caso queira usar por fora, use o atributo name do input no for da label
  • Para ligar o valor da checkbox ao script, use [checked]
  • Para reagir à alteração do valor da checkbox, use (change)
<!--Input IP-->
<mat-form-field>
  <mat-label class="temp"> IP </mat-label>
  <input
    type="number" placeholder="Digite seu IP" aria-label="number"
    name="ip" value="" matInput
    [formControl]="formControlIP" [disabled]="inputDisabled" />
  <mat-error *ngIf="formControlIP.hasError('required')">
    Campo requirido
  </mat-error>
</mat-form-field>
  • Para receber o valor alterado da checkbox, use [disabled]
  • A sintaxe {{ }} é reconhecida como template, então escape as chaves com o atributo ngNonBindable ou use o texto diretamente.
  • Você pode escolher um valor inicial para o inputDisabled no componente.
export class MyComponent {
  inputDisabled = true;
}
2
  • Olá Gustavo, boa tarde! Primeiro,gostaria de agradecer por responder e pelas sugestões bem explicada. Na primeira vez que eu fiz o teste, não tinha dado certo. Porem, percebi que o meu formControl que uso para validar o campo, estava interferindo.
    – Leogomes
    Commented 25/01/2023 às 18:26
  • Muito Obrigado!
    – Leogomes
    Commented 25/01/2023 às 18:26

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 .