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

Question

在我的全栈项目中，我需要在公式中更新日期，为此，我使用公式从数据库中接收数据，并使用数据库中的原始值设置输入。问题是当我尝试设置 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 的键有一个额外的“d”createdAtd: 而不是createdAt:。是这个问题吗？

编辑

参考报告的this issue，这可能是由于为日期选择器分配了一个字符串值，而不是一个真正的 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
              })
            }
          }
        )
  }

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