Angular 7+ Using CustomPipe on ngModel

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

change `if(value.indexOf('0001') > -1) {` to `if(value && value.indexOf('0001') > -1) {` helps? — rst, Aug 22 '19 at 11:20
That removes the error and gets the project back working, but I am still seeing 0001 Dates where no date has been selected. Do I need to use the pipe in typescript onInit() instead of html? — Zoran K., Aug 22 '19 at 12:02
https://stackoverflow.com/questions/56685403/how-to-change-ngbdatepicker-date-format-from-json-to-yyyy-mm-dd, but if only want to use objects Date of javascript you can use NgbDateAdapter https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter, for localization configure the locale and register the locale data as explained in the i18n guide: https://angular.io/guide/i18n — Eliseo, Aug 22 '19 at 12:10
I guess instead of making a pipe, can't you do the same thing in the ngOnInit() when you are fetching the value? It will check for the index of the year and make it blank if it returns '0001'. — Sunny Parekh, Aug 22 '19 at 13:24

score 0 · Answer 1 · answered Aug 22 '19 at 11:40

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

score 0 · Answer 2 · answered Aug 22 '19 at 15:21

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 = "";
              }

Angular 7+ Using CustomPipe on ngModel

2 Answers2