javascript - 角反应形式日期设定值
问题描述
我正在开发 Angular 项目,其中一个组件是更新客户端组件,其中客户端的数据被填充到响应式表单以进行编辑,客户端的信息来自 API,
我使用 FormGroup.setvalue 将数据填充到表单中,除日期输入字段外,所有客户的数据均已填充,请您告知为什么日期输入字段未填充任何内容,请考虑所有这些信息将在编辑后重新提交,
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>
解决方案
可能是因为不同data types
。可能您date
的来源api
是 instring
并且您正在尝试设置输入类型的值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
})
推荐阅读
- python - 使用 zip() 对元组列表进行排序时,有时不支持“<”
- r - 将命名向量转换为 data.frame R
- java - 为什么 java wrapper 没有在 macOS 上的 JAVA_HOME 中选择正确的版本?
- javascript - 调整窗口大小时如何防止div移动?
- asp.net - Mono 对 ASP.NET Web 窗体的支持的未来是什么?
- sorting - Kotlin 的 sortedBy 是否保持相等值的顺序?
- c - 尝试按文件和文件夹分隔 struct stat 时,为什么我有两个相同的数组?
- shell - 循环使用逗号分隔的子字符串,而不会中断空格
- angular - Angular 9:如何获取从 rest api 服务调用返回的对象的属性
- python - 可调用以添加到引用 M2M 关系的中间模型中的额外字段的 list_display