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();
        }
      }
    }
  • 相关阅读:
    redis的两种安装方法
    http头部信息
    软件测试技术知识
    github使用
    3 python之基础概要
    2 Python之编程语言介绍及变量
    1 Python入门及计算机硬件知识
    Linux常用命令
    CMDB小练习
    CMDB和运维自动化
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6323585.html
Copyright © 2011-2022 走看看