时间戳

首页 > 解决方案 > Angular 7+ 在 ngModel 上使用 CustomPipe

angular - Angular 7+ 在 ngModel 上使用 CustomPipe

问题描述

我有一个日期日历选择器的输入，它将日期存储在服务器上并返回它们onInit。我遇到的问题是当没有存储或选择日期时，它返回 01/01/0001 数字。如果尚未在服务器上选择或保存任何内容，我希望输入为空或具有 dd/mm/yyyy 之类的占位符。因此，我构建了一个无法使用的自定义管道ngModel。

我得到一个错误 value is undefined。

HTML：

<div class="form-group">
    <label for="motDate">MOT Date</label>
    <input type="text" class="form-control" placeholder="dd-mm-yyyy" ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" #motDate>
    <input type="hidden" [ngModel]="model.motDate | dateNotEmpty" (ngModelChange)="onMOTDateSelected($event)" name="motDate" />
</div>

组件打字稿：

export class VehicleFormComponent implements OnInit {  
  @ViewChild('motDate') motDatePicker;

  ngOnInit() { 
    // shows the dates from the server in the right format using moment
    this.motDatePicker.nativeElement.value = `moment(this.model.motDate).format('DD/MM/YYYY');`
  }

  onMOTDateSelected(e) {
    this.model.motDate = new Date(e.year.toString() + '-' + `e.month.toString() + '-' + e.day.toString());`
  }   
}

定制管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateNotEmpty',
  pure: false
})  
export class DateNotEmptyPipe extends DatePipe implements PipeTransform {
  transform(value: any, format: string): any {
    if (value.indexOf('0001') > -1) {
      return "";
    } else {
      return new DatePipe('en-GB').transform(value, format);
    }
  }
}

标签： angulartypescriptangular7

解决方案

我认为这会奏效。

这是您的代码：

//html
      <div class="form-group">
        <label for="motDate">MOT Date</label>
        <input type="text" class="form-control" placeholder="dd-mm-yyyy"
               ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" #motDate>
        <input type="hidden" [ngModel]="model.motDate | dateNotEmpty" (ngModelChange)="onMOTDateSelected($event)" name="motDate" />
      </div>

//typescript
export class VehicleFormComponent implements OnInit {

  @ViewChild('motDate') motDatePicker;

    ngOnInit() { 
    // shows the dates from the server in the right format using moment
    this.motDatePicker.nativeElement.value = `moment(this.model.motDate).format('DD/MM/YYYY');`
    }
  onMOTDateSelected(e) {
    this.model.motDate = new Date(e.year.toString() + '-' + `e.month.toString() + '-' + e.day.toString());`
 }   
}

//custom pipe
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateNotEmpty',
    pure: false
})

export class DateNotEmptyPipe extends DatePipe implements PipeTransform {
  transform(value: any, format: string): any {
    console.log('Value here': value);
    if (value && value.indexOf('0001') > -1) {
      return "";
    } else {
      return new DatePipe('en-GB').transform(value, format);
    }
  }
}

推荐阅读