Angular formControlName 中的日期管道答案

【问题标题】：Date pipe in Angular formControlNameAngular formControlName 中的日期管道
【发布时间】：2019-09-18 21:11:22
【问题描述】：

有人可以指导我使用 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)

谢谢！

【问题讨论】：

你把'apprTimestamp'作为字面量传递，当然不能转换成时间！
当我将其传递为 <input type="text" formControlName="{{ apprTimestamp | date:'medium' }}"> 时，我得到 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)
你为什么要为表单控件name分配一个日期时间？这样做有什么目的？
apprTimestamp 的值类似于 2018-01-01 的字符串格式，我的错我应该提到它
这不是其他人的重点，您在代码中使用文字字符串 'apprTimestamp' 而 not 是具有分配值的变量。那是因为你用单引号括住了你的变量名。

标签： javascript angular angular8 angular-pipe date-pipe

【解决方案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

【讨论】：

【解决方案2】：

如果您确实想将日期值分配给 formControlName，请使用包含时间戳值的变量排除 ''。

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

【讨论】：

不起作用，并且失败，但出现异常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)