сменить пароль на угловой

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

Ваш код верен, 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..'));
}

Answer 2

Поскольку вы используете подход «Реактивные формы», у вас уже есть changePasswordForm, определенный в вашем классе компонентов.Вам просто нужно использовать его свойство value.

Вставить службу как зависимость в ваш компонент, выполнив constructor(private service: Service) {}, а затем в методе changePassword() вызвать метод changePassword() на вашемservice.

Теперь, когда у вас уже есть имена FormControl как old_password и new_password, вам не нужно явно деструктурировать их из значения формы.

Попробуйте это:

ComponentClass:

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