(change) vs (ngModelChange) i angular

(change)`-hendelse knyttet til klassisk input endringshendelse.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Du kan bruke (change) event selv om du ikke har en modell ved inngangen som

<input (change)="somethingChanged()">

(ngModelChange) er @Output for ngModel-direktivet. Den utløses når modellen endres. Du kan ikke bruke denne hendelsen uten ngModel-direktivet.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Etter hvert som du oppdager mer i kildekoden, sender (ngModelChange) ut den nye verdien.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Så det betyr at du har evne til slik bruk:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

I utgangspunktet virker det som om det ikke er noen stor forskjell mellom to, men ngModel-hendelser får makten når du bruker [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

anta at du prøver det samme uten " ngModel ting"

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

I Angular 7 vil (ngModelChange)="eventHandler()" utløses før verdien bundet til [(ngModel)]="value" endres, mens (change)="eventHandler()" utløses etter verdien bundet til [(ngModel)]="value" endres.

Som jeg har funnet og skrevet i et annet emne - dette gjelder vinkel < 7 (ikke sikker på hvordan det er i 7+)

Bare for fremtiden

vi må observere at [(ngModel)]="helt.navn" er bare en snarvei som kan sukkeres til: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Så hvis vi de-sukker koden vi ville ende opp med:

'<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">`

eller

<[ngModel]="helt.navn" (ngModelChange)="helt.navn = $event" velg (ngModelChange)="onModelChange()">

Hvis du inspiserer koden ovenfor, vil du legge merke til at vi ender opp med 2 ngModelChange-hendelser, og de må kjøres i en viss rekkefølge.

For å oppsummere: **Hvis du plasserer ngModelChange før ngModel, får du $event som den nye verdien, men modellobjektet ditt har fortsatt den forrige verdien. Hvis du plasserer den etter ngModel, vil modellen allerede ha den nye verdien.

SOURCE