Question

在我的fullstack项目中，我需要在处方集中更新日期，为此，我使用处方集从数据库接收数据并使用数据库中的原始值设置输入。问题是当我尝试设置mdDatepicker的输入时我不知道我做错了什么。这是错误

错误：Datepicker：DateAdapter无法将值识别为日期对象。

后端：nodejs 数据库：mysql 前：角4

类

export class Empresa {
    constructor(
        public NUM_ID_EMPRESA: number,
        public STR_IDENTIFICACION: number,
        public STR_TIPO_IDENTIFICACION: number,
        public STR_NOMBRE: string,
        public createdAt: string
    ) {}
}

这是编辑处方集的控件

 createControlsEdit() {
    this.form = this.fb.group({       
      NUM_ID_EMPRESA: '',
      STR_NOMBRE:  ['', Validators.compose([Validators.required])],
      STR_TIPO_IDENTIFICACION: ['', Validators.compose([Validators.required])],
      STR_IDENTIFICACION: ['', Validators.compose([Validators.required, Validators.pattern(validaNum)])],
      createdAt: '' // this is the control for date
    })
  }

这是我对处方集的补丁值

this.service.getEmpresa(id)
        .subscribe(
            rs => this.empresa = rs,
            er => console.log('Error:', er),
            () => {
            if (this.empresa.length > 0) {                   
                this.esEdicion = true;                    
                this.form.patchValue({                   
                NUM_ID_EMPRESA: this.empresa[0].NUM_ID_EMPRESA,
                STR_NOMBRE: this.empresa[0].STR_NOMBRE,
                STR_TIPO_IDENTIFICACION: this.empresa[0].STR_TIPO_IDENTIFICACION,
                STR_IDENTIFICACION: this.empresa[0].STR_IDENTIFICACION,
                createdAt: this.empresa[0].createdAt // here recieve data from model
              })
            }
          }
        )
  }

这是我对mdDatePicker

的html视图

<div class="form-group">
     <md-form-field>
         <input id="createdAt" formControlName="createdAt" mdInput [mdDatepicker]="picker" (click)="picker.open()" placeholder="Elija una fecha">
          <md-datepicker-toggle  mdPrefix [for]="picker" ></md-datepicker-toggle>
          <md-datepicker #picker></md-datepicker>
      </md-form-field>
</div>

感谢

Answer 1

用于在patchValue调用中引用日期formControl的密钥有一个额外的＆＃39; d＆＃39; createdAtd:代替createdAt:。这是问题吗？

修改

参考报告的this issue，可能是由于为datepicker分配了一个字符串值而不是一个真正的Date对象。您可以将日期控件的初始值指定为null而不是''（可能这并不重要，但不确定），然后每当您为该控件设置新值时，始终确保它是一个真正的Date对象（使用javascript Date库或使用momentjs。

因此，在您的示例中，您可以尝试进行这些更改，

createControlsEdit() { this.form = this.fb.group({ NUM_ID_EMPRESA: '', STR_NOMBRE: ['', Validators.compose([Validators.required])], STR_TIPO_IDENTIFICACION: ['', Validators.compose([Validators.required])], STR_IDENTIFICACION: ['', Validators.compose([Validators.required, Validators.pattern(validaNum)])], createdAt: null // this is the control for date (setting to null) }) } this.service.getEmpresa(id) .subscribe( rs => this.empresa = rs, er => console.log('Error:', er), () => { if (this.empresa.length > 0) { this.esEdicion = true; // assuming your date format is 'yyyy-mm-dd', if different change this logic const str = this.empresa[0].createdAt.split('-'); const dateObj = new Date(+str[0], +str[1] - 1, +str[2]); // doing 'month - 1' as it is zero-based this.form.patchValue({ NUM_ID_EMPRESA: this.empresa[0].NUM_ID_EMPRESA, STR_NOMBRE: this.empresa[0].STR_NOMBRE, STR_TIPO_IDENTIFICACION: this.empresa[0].STR_TIPO_IDENTIFICACION, STR_IDENTIFICACION: this.empresa[0].STR_IDENTIFICACION, createdAt: dateObj // use the Date obj created above }) } } ) }

您可能必须确保在应用程序中稍后更新此值时，将其设置为有效的日期类型而不仅仅是字符串。希望它有所帮助。

使用patchvalue将数据发送到Angular Material的mdDatepicker

1 个答案: