Angular 6 - 还原表单字段在提交时更改的值

Question

在我的 angular 6 应用程序中，有一个个人资料更新部分，个人资料表格最初加载了预填的详细信息，即在注册期间保存的详细信息。

表格如下所示

头衔、名字、姓氏、电子邮件地址是输出字段，因此无法编辑。

如果触摸新电子邮件地址，则必须填写新电子邮件地址；如果输入新电子邮件，则必须确认电子邮件地址。

用户可以编辑新的电子邮件地址、手机号码和白天 Phone 号码字段。

提交时，将调用后端服务来更新用户配置文件。如果此服务已关闭，我必须将已更改的表单字段恢复为最初加载的方式。

我正在使用以下代码重置电子邮件、确认电子邮件、手机号码和白天 phone 号码。

updateProfile(){
    this.http.post('https://testurl/user/updateProfile', param, options).subscribe(
        data => {
            console.log("Profile update successful:", data);
        },
        error => {
            console.log("Profile update error!", error);
            if(error.status === '500'){ // If service is down
                this.profileForm.controls['newemail'].reset();
                this.profileForm.controls['confirmemail'].reset();
                this.profileForm.controls['mobile'].reset();
                this.profileForm.controls['daytimephone'].reset();          
            }
        }
    );
}

但这给出了以下错误。无论如何重置只是清空字段。

ERROR TypeError: Cannot read property 'reset' of undefined

我想查找字段是否被修改并将其值恢复为初始值（如果存在）。

为了更清楚，假设用户修改了以下字段

new email => testabc10@gmail.com
confirm email => testabc10@gmail.com
Daytime Phone => +44123456789

假设后端已关闭，当提交此表单时，如何取回白天 Phone 数字的初始值？

请指导，谢谢

Answer 1

我想您有一个方法可以设置控件的初始值。可能就在加载配置文件之后。如果 Web 请求失败，调用相同的方法似乎是个好主意。

profile: Profile;

setProfileFormValue() {
   this.profileForm.controls['newemail'].setValue('');
   this.profileForm.controls['confirmemail'].setValue('');
   this.profileForm.controls['mobile'].setValue(this.profile.mobile);
   this.profileForm.controls['daytimephone']
      .setValue(this.profile.daytimephone);
}
updateProfile() {
   this.http.post('https://testurl/user/updateProfile', param, options)
      .subscribe(data => {
         console.log("Profile update successful:", data);
      },
      error => {
         console.log("Profile update error!", error); // console.error instead of console.log?
         if(error.status === '500') { // If service had an internal server error (not necessary down)
            this.setProfileFormValue();
         }
      });
}

Angular 6 - 还原表单字段在提交时更改的值

Angular 6 - Revert form fields changed values on submit

angular

typescript

forms

angular-reactive-forms

onsubmit