Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/variables/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度反应形式日期设置值_Javascript_Angular_Angular Material_Angular Reactive Forms - Fatal编程技术网

Javascript 角度反应形式日期设置值

Javascript 角度反应形式日期设置值,javascript,angular,angular-material,angular-reactive-forms,Javascript,Angular,Angular Material,Angular Reactive Forms,我在Angular项目中工作,其中一个组件是更新客户端组件,其中客户端的数据填充到反应式表单以进行编辑,客户端的信息来自API, 我使用FrimGult.StValuy填充数据到表单中,除了日期输入字段之外,所有客户端的数据都填充了,请您建议为什么日期输入字段不填充任何内容,请考虑所有这些信息将在编辑后重新提交, import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@

我在Angular项目中工作,其中一个组件是更新客户端组件,其中客户端的数据填充到反应式表单以进行编辑,客户端的信息来自API,
我使用FrimGult.StValuy填充数据到表单中,除了日期输入字段之外,所有客户端的数据都填充了,请您建议为什么日期输入字段不填充任何内容,请考虑所有这些信息将在编辑后重新提交,

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';
import { Client } from 'src/app/models/Client';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';


@Component({
 selector: 'app-update',
 templateUrl: './update.component.html',
 styleUrls: ['./update.component.css']
 })
 export class UpdateComponent implements OnInit {

client:Client= new Client();
editForm: FormGroup;

constructor(private route:ActivatedRoute, private service:UserService, private router:Router,        private formBuilder:FormBuilder) { }


ngOnInit() {

 this.editForm = new FormGroup({
  id: new FormControl(),
  domain: new FormControl(),
  owner : new FormControl(),
  email: new FormControl(),
  hostComp : new FormControl(),
  cpUrl: new FormControl(),
  expDate: new FormControl(),
  cpUsername : new FormControl(),
  cpPassword : new FormControl(),
  depDate : new FormControl(),
  notices: new FormControl() 
 });



  this.route.params.subscribe(data=>{
  const id = data.id;


     this.service.getClient(id).subscribe(data=>{

     this.editForm.setValue({
      id: data.id,
      domain: data.domain,
      owner : data.owner,
      email: data.email,
      hostComp : data.hostComp,
      cpUrl: data.cpUrl,
      expDate: data.expDate,
      cpUsername : data.cpUsername,
      cpPassword : data.cpPassword,
      depDate : data.depDate,
      notices: data.notices 
    })     
    });
   });
  }

  cancel(){
 let id = this.client.id
 this.router.navigate(['/info', id]);
  }

  update(){

  this.service.updateClient(this.client).subscribe(data=>{
    this.router.navigate(['/info', this.client.id]);
  });
  }
   }
html视图是这样的

<form  [formGroup]="editForm" (ngSubmit)="update()">


    <label>Domain</label>
   <input type="text"  formControlName="domain" name="domain" >

   <label>Owner</label>
    <input type="text"  name="owner" formControlName="owner" >


   <label>Email</label>
    <input type="text"  name="email" formControlName="email" >

   <label>Hosting Company</label>
   <input type="text"  name="hostcomp" formControlName="hostComp" >

     <label>CP URL</label>
   <input type="text"  name="cpurl" formControlName="cpUrl" >

    <label>Expiration</label>
    <input type="date"  name="expdate" formControlName="expDate" >

    <label>Deployment</label>
    <input type="date"  name="depdate" formControlName="depDate" >

     <button type="submit" class="btn btn-success">Submit</button>
     <button type="submit" class="btn btn-primary" (click)="cancel()">Cancel</button>

   </form>

领域
所有者
电子邮件
托管公司
CP URL
到期
部署
提交
取消

这可能是由于不同的
数据类型造成的。可能来自
api
date
位于
string
中,您正在尝试设置
date
的输入类型的值

你可以试试这个

this.editForm.setValue({
  id: data.id,
  domain: data.domain,
  owner : data.owner,
  email: data.email,
  hostComp : data.hostComp,
  cpUrl: data.cpUrl,
  expDate: new Date(data.expDate),
  cpUsername : data.cpUsername,
  cpPassword : data.cpPassword,
  depDate : new Date(data.depDate),
  notices: data.notices 
}) 

当您设置日期
新日期(data.expDate).toISOString().substring(0,10)
时,请尝试使用此选项。这可以解决我的问题,谢谢您。当客户端没有日期时,我将填充1/1/1970而不是null,你知道如何处理这个问题吗?请在setValue中使用三元运算符:
expDate:data.expDate?new Date(data.expDate).toISOString().substring(0,10):null
。注:我没有时间检查,但我想这只是
expDate:new Date(data.expDate)
我尝试使用内置软件包,看看它是否适合您。如果这个答案对你有帮助,那么请接受这个答案,这样其他人也可以得到这个答案。