Date pipe in Angular formControlName

Question

Can someone please guide me to implement date pipe in angular 8 with formControlName

train.component.html

<mat-grid-tile colspan=1 rowspan=1>
    <div class="train-control">
        <input type="text" formControlName="{{ 'apprTimestamp' | date:'medium' }}">
    </div>
</mat-grid-tile>

But does not not seemed to work. Can some one please guide me.

Exception

TrainComponent.html:58 ERROR Error: InvalidPipeArgument: 'Unable to convert "apprTimestamp" into a date' for pipe 'DatePipe'
    at invalidPipeArgumentError (common.js:5737)
    at DatePipe.transform (common.js:6877)
    at checkAndUpdatePureExpressionInline (core.js:34381)
    at checkAndUpdateNodeInline (core.js:35155)
    at checkAndUpdateNode (core.js:35090)
    at debugCheckAndUpdateNode (core.js:36112)
    at debugCheckDirectivesFn (core.js:36055)
    at Object.eval [as updateDirectives] (TrainComponent.html:60)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:36043)
    at checkAndUpdateView (core.js:35055)

Thanks !

You pass 'apprTimestamp' as a literal string, of course it can't be converted to time! — ISAE, Sep 18 '19 at 21:15
When I pass this as `````` , I get ```TrainComponent.html:58 ERROR Error: Cannot find control with unspecified name attribute at _throwError (forms.js:2749) at setUpControl (forms.js:2573) at FormGroupDirective.addControl (forms.js:6318) at FormControlName._setUpControl (forms.js:6969)``` — user1993412, Sep 18 '19 at 21:17
Why are you trying to assign a datetime to a form control *name*? What purpose does that serve? — Igor, Sep 18 '19 at 21:19
apprTimestamp is value something like 2018-01-01 in string format , my bad I should have mentioned it — user1993412, Sep 18 '19 at 21:21
That is not the point everyone else is making, you are using a literal string `'apprTimestamp'` in your code and *not* the variable with the assigned value. That is because you enclosed your variable name with single quotes. — Igor, Sep 18 '19 at 21:23

score 4 · Answer 1 · answered Sep 19 '19 at 10:18

You can use the datepipe in the component as well, and modify the date from there. This will only work once, with a preset date. But you are also not including anything else in your question, so we can completely omit that.

So I suggest the following:

import { DatePipe } from '@angular/common';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  providers: [DatePipe]
})

Inject it in the constructor and then use::

constructor(private fb: FormBuilder, private datePipe: DatePipe) {
  this.myForm = this.fb.group({
    field1: [this.datePipe.transform(new Date(), 'medium')]
  })
}

Then remove the pipe from the template.

STACKBLITZ

Vandesh · Answer 2 · 2019-09-18T21:23:13.767

-4

Exclude the '' with the variable containing the timestamp value, if you really want to assign the date value to the formControlName.

<input type="text" name="someName" formControlName="{{ apprTimestamp | date:'medium' }}">

edited Sep 18 '19 at 21:23

answered Sep 18 '19 at 21:16

Vandesh

6,368
1
26
38

2

Does not work , and fails with the exception ```TrainComponent.html:58 ERROR Error: Cannot find control with unspecified name attribute at _throwError (forms.js:2749) at setUpControl (forms.js:2573) at FormGroupDirective.addControl (forms.js:6318) at FormControlName._setUpControl (forms.js:6969) at FormControlName.ngOnChanges (forms.js:6892) ``` – user1993412 Sep 18 '19 at 21:22

Date pipe in Angular formControlName

2 Answers2