在angular中更改密码

我正在尝试在登录后更改密码。我有service.ts和component.html。我想要组件.ts逻辑。怎么做

这里的初学者。对我宽容点

服务.ts

changePassword(data){
  var headers = new HttpHeaders()
    .set('Authorization', 'Token ' + localStorage.getItem('usertoken'));

  var options =  {
      headers: headers
  };
  return this.httpClient
    .patch('/api/auth/change_password/',data, options)
}

component.html

<form [formGroup]="changePasswordForm" (ngSubmit)="changePassword(changePasswordForm.value)">
  <div class="form-group" [ngClass]="{'has-error':!changePasswordForm.controls['old_password'].valid && changePasswordForm.controls['old_password'].touched}">
    <label for="old_password">Old Password</label>
    <input type="password" name="old_password" class="form-control" id="oldPassword" placeholder="Old Password" [formControl]="changePasswordForm.controls['old_password']" />
    <small *ngIf="changePasswordForm.controls['old_password'].hasError('required') && changePasswordForm.controls['old_password'].touched" class="text-danger">Old Password Required</small>
  </div>
  <div class="form-group" [ngClass]="{'has-error':!changePasswordForm.controls['new_password'].valid && changePasswordForm.controls['new_password'].touched}">
    <label for="new_password">New Password</label>
    <input type="password" name="new_password" class="form-control" id="newPassword" placeholder="New Password" [formControl]="changePasswordForm.controls['new_password']" />
    <small *ngIf="changePasswordForm.controls['new_password'].hasError('required') && changePasswordForm.controls['new_password'].touched" class="text-danger">New Password Required</small>
  </div>

  <div class="form-group text-center">
    <button type="submit" class="btn btn-default" [disabled]="!changePasswordForm.valid">Change Password</button>
  </div>
</form>

旧密码
需要旧密码
新密码
需要新密码
修改密码

因为您使用的是反应式表单方法，所以您已经在组件类上定义了

changePasswordForm

。您只需使用它的

值

属性

通过执行

constructor（private service:service）{}

将服务作为依赖项注入组件，然后在

changePassword（）

方法中，对服务调用

changePassword（）

方法

现在，由于您已经将

FormControl

名称命名为

old\u password

和

new\u password

，因此不需要从表单值显式地对它们进行解构

试试这个：

组件类：

constructor(private service: Service) {}
...
changePassword() {
  this.service.changePassword(this.changePasswordForm.value)
    .subscribe(res => console.log(res));
}

---

由于您使用的是被动表单方法，因此您已经在组件类上定义了

changePasswordForm

。您只需使用它的

值

属性

通过执行

constructor（private service:service）{}

将服务作为依赖项注入组件，然后在

changePassword（）

方法中，对服务调用

changePassword（）

方法

现在，由于您已经将

FormControl

名称命名为

old\u password

和

new\u password

，因此不需要从表单值显式地对它们进行解构

试试这个：

组件类：

constructor(private service: Service) {}
...
changePassword() {
  this.service.changePassword(this.changePasswordForm.value)
    .subscribe(res => console.log(res));
}

---

您的代码是正确的，

component.ts

逻辑现在非常简单。只需使用

private

键盘将服务注入构造函数。然后在

changePassword（）

方法中，调用仅发送所需值的服务：

changePassword(f) {
  const {old_password, new_password} = f.value;
  this.serviceVar
    .changePassword({old_password, new_password})
    .subscribe(() => console.log('Success!'), 
               () => console.log('A problem occurred..'));
}

---

您的代码是正确的，

component.ts

逻辑现在非常简单。只需使用

private

键盘将服务注入构造函数。然后在

changePassword（）

方法中，调用仅发送所需值的服务：

changePassword(f) {
  const {old_password, new_password} = f.value;
  this.serviceVar
    .changePassword({old_password, new_password})
    .subscribe(() => console.log('Success!'), 
               () => console.log('A problem occurred..'));
}

---

它完全取决于您的API期望作为请求有效负载的内容。{old_password:“abc123”，new_password:“abc321”}您确切拥有什么？它完全取决于您的API期望作为请求有效负载的内容。{old_password:“abc123”，new_password:“abc321”}您确切拥有什么？