以角度重置所选输入字段

Question

我有edit的组件，并动态地添加了多个address，UI如下所示：

添加/编辑特定的address之后。我正在重置整个 form 字段值。为了像这样的新address：

但是我只想清空address输入字段（表示类型，城市...）。单击添加按钮时。

但是现在单击add按钮时，我正在重置所有表单字段值（如第二张图片所示，也重置了 name ）。 如何仅重置地址字段输入值？点击添加按钮。

DEMO

Answer 1

您可以按以下方式按角度重设特定字段：

this.yourForm.controls['field_name'].reset()

不是使用form.reset()重设整个表格；而是尝试重置您想要的特定字段。

Answer 2

与其重设整个表单，不如只重设要清除的字段。

获取单个字段引用formControl对象，如下所示

get addressType() {
    return this.editForm.get('addressType');   }

get city() {
    return this.editForm.get('city');   }

get postalCode() {
    return this.editForm.get('postalCode');   }

然后使用onSubmit将setValue('')表单的值设置为空

this.addressType.setValue('');
this.city.setValue('');
this.postalCode.setValue('');

请在fork stackblitz

上找到解决方案

Answer 3

另一种重置数据的方法，如下所示，

this.newAttribute.addressType = this.newAttribute.postalCode = this.newAttribute.city = "";