cambio:
el evento de cambio se activa para los elementos <input>, <select> y <textarea> cuando el usuario confirma una modificación del valor del elemento. El evento de cambio no se activa necesariamente para cada modificación del valor de un elemento. El cambio es un evento DOM que puede desenstringr cambios en etiquetas y elementos HTML.
- Sintaxis:
<input (change)="function($e)">
- Ejemplo:
archivo HTML:
<label>Choose your favorite cartoon: <select class="cartoon" name="cartoon"> <option value="">Select One …</option> <option value="Tom and Jerry">Tom and Jerry</option> <option value="Doraemon">Doraemon</option> <option value="Phineas and Ferb">Phineas and Ferb</option> </select> </label> <div class="result"></div>
Archivo TypeScript:
const selectElement = document.querySelector('.cartoon');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
- Producción
ngModelChange:
cuando el usuario desea cambiar el modelo, al ingresar texto en la entrada, la devolución de llamada del evento se activa y establece el nuevo valor para el modelo. No podemos usar mgModelChange sin ngModel porque la clase ngModel tiene una función de actualización con la instancia de EventEmitter. ngModelChange solo se activará cuando el modelo cambie o se actualice.
- Sintaxis
<input [(ngModel)]="value" (ngModelChange)="function($e)">
- Ejemplo
de archivo HTML:
<div style="color: red" *ngIf="isInvalid"> Please check your ranges </div> <form (submit)="onSubmit()" id="inputForm" class="form-group" class="row"> <h3>Price Filters</h3> <span>Greater than:</span> <input type="number" name="greaterThanValue" [(ngModel)]="greaterThanValue" (ngModelChange)="onChange($event)" placeholder="0"> <span>Less than:</span> <input type="number" name="lessThanValue" [(ngModel)]="lessThanValue" (ngModelChange)="onChange($event)"> <input type="submit"> </form>
- Archivo TypeScript:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public greaterThanValue = 0;
public lessThanValue = 1;
public isInvalid: boolean = false;
public onChange(event: any): void {
this.isInvalid =
this.greaterThanValue > this.lessThanValue;
}
}
- Producción
Diferencias:
| cambio | ngModelChange |
|---|---|
| change está vinculado al evento onchange de HTML. Es un evento DOM. | ngModelChange está vinculado a la variable del modelo vinculada a su entrada. |
| No se requiere tal clase. | ngModelChange necesita la clase ngModel para funcionar. |
| evento de cambio vinculado al evento de cambio de entrada clásico. | ngModelChange Se activa cuando cambia el modelo. No puede usar este evento sin la directiva ngModel. |
| cambia los disparadores cuando el usuario cambia la entrada. | ngModelChange se activa cuando el modelo cambia, independientemente de si ese cambio es causado por el usuario o no. |
Publicación traducida automáticamente
Artículo escrito por SonaliPatel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA