Angular 7+在ngModel上使用CustomPipe

Question

I have an input with a date calendar picker that is storing dates on a server and returning them onInit . The problem I am having is when the date is not stored or picked, it returns 01/01/0001 numbers. I want the input to be empty or have a placeholder like dd/mm/yyyy if nothing was selected or saved on the server yet. So I built a custom pipe which I can't get it to work with ngModel .

I am getting an error of 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>

Component 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 {
    if (value.indexOf('0001') > -1) {
      return "";
    } else {
      return new DatePipe('en-GB').transform(value, format);
    }
  }
}

Answer 1

I think this would work.

Here are your codes:

//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);
    }
  }
}

Answer 2

Thanks for opening my eyes Sunny in the comments above, I had this pipe already used on a few places so wanted to reuse it here and got stuck for no reason. I added an if statement now after the date has been initialised and it works fine:

Thanks to others as well for trying to help me out on my journey, much appreciated!

this.motDatePicker.nativeElement.value = moment(this.model.motDate).format('DD/MM/YYYY');
              if (this.motDatePicker.nativeElement.value.indexOf('0001') > -1) {
                this.motDatePicker.nativeElement.value = "";
              }