zoukankan      html  css  js  c++  java
  • [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();
        }
      }
    }
  • 相关阅读:
    基于golang的分布式任务管理系统
    golang sql 包连接池分析
    Go web框架构建三层架构
    004-位置参数变量
    003_1-当前系统语言的相关知识
    003-环境变量
    002-自定义变量
    001--变量概述
    2017-07-04(sudo wc sort)
    优化分页的查询
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6323585.html
Copyright © 2011-2022 走看看