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();
        }
      }
    }
  • 相关阅读:
    float保留指定位数的小数
    springmvc中拦截器的使用
    springmvc文件上传
    spring注入
    mybatis动态代理
    2017《JAVA技术》预备作业02 计科1502 郎春雨
    2017《JAVA技术》预备作业01 计科1502 郎春雨
    字符串占位符的使用
    Pyenv虚拟环境的创建(虚拟机)
    Git的基本使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6323585.html
Copyright © 2011-2022 走看看