0

Necesito saber si los checkbox están checked para almacenar o no los datos.

Tengo el siguiente checkbox:

<mat-radio-button color="primary" *ngIf="type === 'category'" class="example-margin" value="{{d.value}}" (change)="onChange($event)">{{d.text}}</mat-radio-button>

Y tengo esto en el typescript:

onChange(event) {
let data = {};

if (this.type === 'category') {
  data[this.type + 'Id'] = event.value;
  this.noticeService.addToStepsData(this.stepsData, data, this.type);
}
else if (this.type === 'brand') {
  data[this.type + 'Id'] = event.source.value;
  this.array.push(data);
  this.noticeService.addToStepsData(this.stepsData, this.array, this.type);
}}

En el else if antes de hacer el push necesito pasarle la validación con if para saber si esta checked o no.

2
  • Angular tiene reactiveForms y el NgModel. ¿Estás usando alguno de esos?
    – Legna
    el 16 oct. 2018 a las 15:26
  • Hize un ejemplo con reactiveForms, te va facilitar mucho la vida. stackblitz.com/edit/angular-7rmqms
    – Legna
    el 16 oct. 2018 a las 16:21

2 respuestas 2

0

Debe comprobar event.target.checked para poder ver si esta seleccionado, así es como se puede lograr:

<input id="is3dCheckBox" type="checkbox" checked="checked" />

Y en tu código:

var element = <HTMLInputElement> document.getElementById("is3dCheckBox");
var isChecked = element.checked;
7
  • gracias por tu ayuda pero no se en que parte del typescript poner la validación.
    – charli
    el 16 oct. 2018 a las 14:43
  • Agregala dentro de tu método. Debería de funcionar.
    – demianrc
    el 16 oct. 2018 a las 14:44
  • he añadido eso dentro de mi metodo y he hecho un if (!isChecked) que haga lo que tenga que hacer, pero me sale en la consola: Cannot read property 'checked' of null
    – charli
    el 16 oct. 2018 a las 14:46
  • y trabajo con typescript no se si tiene que ver pero la variable element recibe null.
    – charli
    el 16 oct. 2018 a las 14:50
  • Creo que no podré ayudar hermano.
    – demianrc
    el 16 oct. 2018 a las 14:51
0

Segun la documentacion de mat-radio-button, existe una propiedad llamada checked que actualiza el modelo en base a si esta seleccionado no.

Por lo que solo tendras que asignarle un modelo de tu componente:

<mat-radio-button 
value="{{d.value}}"
[checked]="checkSeleccionado" <----- asignadole modelo a la propiedad [checked]
(change)="onChange($event)">
  {{d.text}}
</mat-radio-button>

Entonces solo tendrias que preguntar si esta seleccionado:

export class NombreComponente {
    onChange(event) {
        //...
       if(checkSeleccionado){

      }
   //...
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.