在 angular 中更改密码

Question

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

初学者。对我放宽点。

service.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>

Answer 1

由于您使用的是 Reactive Forms 方法，因此您已经在组件 Class 上定义了 changePasswordForm。你只需要使用它的 value 属性。

通过执行 constructor(private service: Service) {} 将服务作为组件的依赖项注入，然后在 changePassword() 方法中，对您的服务调用 changePassword() 方法。

现在，由于您已经将 FormControl 名称设为 old_password 和 new_password，因此您无需从表单值中显式解构它们。

试试这个：

组件Class:

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

Answer 2

你的代码是正确的，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..'));
}

在 angular 中更改密码

change password in angular

angular

angular6

change-password