首页 > 代码库 > [Angular Form] ngModel and ngModelChange

[Angular Form] ngModel and ngModelChange

When using Radio button for Tamplate driven form, we want to change to the value change and preform some action.

 

import { Component, Input } from @angular/core;import { Passenger } from ../../models/passenger.interface;@Component({  selector: passenger-form,  styleUrls: [passenger-form.component.scss],  template: `    <form #form="ngForm" novalidate>      {{ detail | json }}      <div>        Passenger name:        <input          type="text"          name="fullname"          [ngModel]="detail?.fullname">      </div>      <div>        Passenger ID:        <input          type="number"          name="id"          [ngModel]="detail?.id">      </div>      <div>        <label>          <input             type="radio"            [value]="true"            name="checkedIn"            [ngModel]="detail?.checkedIn"            (ngModelChange)="toggleCheckIn($event)">          Yes        </label>        <label>          <input             type="radio"            [value]="false"            name="checkedIn"            [ngModel]="detail?.checkedIn"            (ngModelChange)="toggleCheckIn($event)">          No        </label>      </div>      <div *ngIf="form.value.checkedIn">        Check in date:        <input           type="number"          name="checkInDate"          [ngModel]="detail?.checkInDate">      </div>      {{ form.value | json }}    </form>  `})export class PassengerFormComponent {  @Input()  detail: Passenger;  toggleCheckIn(checkedIn: boolean) {    if (checkedIn) {      this.detail.checkInDate = Date.now();    }  }}

 

[Angular Form] ngModel and ngModelChange