Angular 以编程方式设置表单的字段会使表单无效
在Ionic 3/Angular 5应用程序中,我有一个由3个字段组成的表单: 名字输入文本 生日日期时间选择器 化身单选按钮 如果表单无效,则“提交”按钮将被禁用: [禁用]=!addChildForm.valid 在初始化时,我检查用户是否正在创建或编辑一个新的子项。在编辑时,我以编程方式填充字段。 这可以正常工作,但“提交”按钮处于非活动状态。虽然出生日期填充得很好,但我必须单击它来打开和关闭选择器以启用提交按钮 我的代码:Angular 以编程方式设置表单的字段会使表单无效,angular,ionic-framework,angular-reactive-forms,angular-forms,Angular,Ionic Framework,Angular Reactive Forms,Angular Forms,在Ionic 3/Angular 5应用程序中,我有一个由3个字段组成的表单: 名字输入文本 生日日期时间选择器 化身单选按钮 如果表单无效,则“提交”按钮将被禁用: [禁用]=!addChildForm.valid 在初始化时,我检查用户是否正在创建或编辑一个新的子项。在编辑时,我以编程方式填充字段。 这可以正常工作,但“提交”按钮处于非活动状态。虽然出生日期填充得很好,但我必须单击它来打开和关闭选择器以启用提交按钮 我的代码: createForm(child?: Child): void
createForm(child?: Child): void {
this.addChildForm = this.formBuilder.group({
firstnameInput: ['', Validators.required],
birthdateInput: ['', Validators.required],
avatarInput: ['', Validators.required]
});
// If we are editing a child, populate the form
if (child) {
this.addChildForm.setValue({
firstnameInput: child.firstname,
birthdateInput: moment(child.birthdate).format(),
avatarInput: child.avatar
});
}
}
你知道我如何在填充表单后强制表单进行检查以启用“提交”按钮吗?不要构建表单然后填充数据,而是在构建步骤中进行检查,一次完成。像这样:
createForm(child?: Child): void {
this.addChildForm = this.formBuilder.group({
firstnameInput: [child ? child.firstname : '', Validators.required],
birthdateInput: [child ? moment(child.birthdate).format() : '', Validators.required],
avatarInput: [child ? child.avatar : '', Validators.required]
});
}
下面是一个链接,其中包含一个工作示例:
尝试将示例中this.child的初始值更改为空字符串,您将看到表单更改和submit按钮被禁用。当它们都有值时,该按钮将再次启用。那么您的数据可能有问题-属性名称、出生日期、,阿凡达总是在孩子身上定义/有值吗?是的,我看到他们被填在表格中。你能在plunkr或stackblitz中重现错误吗?我编辑了我的答案,以包含一个与工作示例的链接。我在formName和ngModel之间有冲突