Question

错误是

InvalidPipeArgument：管道“ DatePipe”的“无效日期”。

我想在p日历（Primeng组件）中显示json数据。我正在从json文件中获取数据并显示在输入字段中，但无法正常工作。

请尽可能提供p-下拉菜单和p-radiobutton的解决方案，以在输入字段中显示json数据

demographic.component.html

res

demographic.component.ts

let obj = {
  name: "something",
  print() {
    console.log(this.name);
    return this.name;
  }
}

let res = obj.print()
console.log(res);

person.json

<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">

<div class="ui-fluid">

    <p-panel header="Demograhics">


        <div class="ui-inputgroup">

                <label for="email" class="ui-md-2 control-label">Birthdate</label>

                    <div class="ui-md-6">
                        <div class="ui-inputgroup">
                            <p-calendar [(ngModel)]="date3" formControlName="birthdate"  [monthNavigator]="true" [defaultDate]="defaultdate" [yearNavigator]="true"   yearRange="1950:2030" [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar> <span style="margin-left:35px">{{date3|date}}</span>       
                        </div>
                    </div>

                    <div class="ui-md-4">     
                        <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['birthdate'].valid&&userform.controls['birthdate'].dirty">
                            <i class="fa fa-close"></i>
                        Birthdate is required
                        </div>                                
                    </div>
        </div>


        <div class="ui-inputgroup">

                <label for="password" class="ui-md-2 control-label">Martial Status</label>

                    <div class="ui-md-6">
                        <div class="ui-inputgroup">
                                <p-dropdown [options]="Martials" formControlName="martialstatus" [(ngModel)]="selectedvalidid5" [style]="{'width':'150px'}" filter="true" name="something" placeholder="MartialStatus">
                                        <ng-template let-item pTemplate="selectedItem">


                                            <span style="vertical-align:middle">{{item.label}}</span>
                                        </ng-template>
                                        <ng-template let-Martial pTemplate="item">
                                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">

                                                <div style="font-size:14px;float:right;margin-top:4px">{{Martial.label}}</div>
                                            </div>
                                        </ng-template>
                                    </p-dropdown>          


                            </div>
                        </div>

                        <div class="ui-md-4">     
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['martialstatus'].valid&&userform.controls['martialstatus'].dirty">
                                <i class="fa fa-close"></i>
                            Martial status is required
                            </div>


                    </div>
        </div>

        <div class="ui-inputgroup">

                <label for="password" class="ui-md-2 control-label">Gender</label>

                    <div class="ui-md-6">
                        <div class="ui-inputgroup">
                            <p-radioButton name="group2" value="Male" formControlName="gender" label="Male"  [(ngModel)]="val2" inputId="preopt1" name="something"></p-radioButton>
                            <p-radioButton name="group2" value="Female" formControlName="gender" label="Female"  [(ngModel)]="val2" inputId="preopt2" name="something"></p-radioButton>
                        </div>
                    </div>

                    <div class="ui-md-4">     
                        <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['gender'].valid&&userform.controls['gender'].dirty">
                            <i class="fa fa-close"></i>
                        Gender is required
                        </div>


                </div>
        </div>



        <div class="ui-inputgroup">

                <div class="ui-md-8 ui-md-offset-4">
                    <button pButton type="submit" label="Submit" [disabled]="!userform.valid"></button>
                        <button pButton type="button" (click)="count()" label="Cancel"></button>                           
                </div>
        </div>                     

    </p-panel>

</div>

</form>

Answer 1

您收到错误消息“ InvalidPipeArgument：管道'DatePipe'的'无效日期'”，因为您尝试使用DatePipe格式化未定义的格式（而且语法不正确）。

首先，您必须获取数据，然后指定从响应中收到的日期。

可以。

在顶部。

date3: string;

以及您收到数据时。

getperson(){

    this.personListService.getDemographic()
    .subscribe(
     resp => {
        this.demographics = resp.Demographics;
        this.date3 = this.datePipe.transform(this.demographics.Birthdate, 'dd.mm.yy');
    });

}

您可以在other answer中检查如何使组件中的DatePipe工作。

但也请记住，在使用DatePipe格式化日期之前，必须将日期更改为ISO标准日期（YYYY-MM-DD）。如果您只是使用json文件存储日期，则将其更改为json文件。如果您使用的是某些数据库，并且字段和api处理设置正确，那么在接收数据时应该已经有iso日期。

InvalidPipeArgument：管道“ DatePipe”的“无效日期”

1 个答案: