Question

有人可以指导我使用formControlName在angular 8中实现日期管道吗？

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>

但是似乎没有用。有人可以指导我吗？

例外

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)

谢谢！

Answer 1

您也可以在组件中使用日期管道，然后从那里修改日期。只能使用一次预设日期的功能。但是，您的问题中也没有包含其他任何内容，因此我们可以完全省略。

所以我建议以下内容：

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

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

将其注入构造函数中，然后使用：:

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

然后从模板中删除管道。

STACKBLITZ

Answer 2

如果您确实想将日期值分配给formControlName，则用包含时间戳记值的变量排除“”。

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

Angular形式的日期管道

2 个答案: