Set value to angular material datepicker using ngmodel - Angular

Question

I'm trying to edit selected value to a custom control value accessor angular material date component but I'm it's return an empty input field.

App.Component.Html

<date-input  ngModel="dateValue"
                name="dateName">
              </date-input>

DateInputComponent.html

  <mat-form-field>
    <input [(ngModel)]="value" matInput [matDatepicker]="picker1" >
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
  </mat-form-field>
</div>

DateInputComponent.ts

get value(): any {
    return this.innerValue;
  }

  // set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  // The internal data model
  private innerValue: any = '';

  // Placeholders for the callbacks which are later provided
  // by the Control Value Accessor
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  ngOnInit() {
    // this.formControlItem = this.formControlItem[this.LabelInput.fieldName];
    this.showInput = true;
  }

  // Set touched on blur
  onBlur() {
    this.onTouchedCallback();
  }

  // From ControlValueAccessor interface
  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

This how the value look like

Tue Feb 11 2020 00:00:00 GMT+0200 (Eastern European Standard Time)

As I said above, nothing show up in the date field if I want to edit the value

I think it's not necesary a "custom form control" to make a datePicker -you don't clearer much the code else complex the aplication. — Eliseo

varundhariyal varundhariyal · Accepted Answer · 2020-02-06T08:26:47

ngModel binding syntactical error.

<date-input [(ngModel)]="dateValue" name="dateName"></date-input>

Set value to angular material datepicker using ngmodel - Angular

1 Answers