忘记密码工作正常，但在更改密码时，错误：无法读取未定义的属性“值”。密码值无法读取

Question

更改密码.ts

changePw(email: HTMLInputElement, contactNo: HTMLInputElement, username: HTMLInputElement, password: HTMLInputElement) {
  console.log("changepasswordhere");
  const user = {
    password: password.value,
    attributes: {
      email: email.value
    }
  }
  console.log(user)

  Auth.currentAuthenticatedUser()
    .then(user => {
      console.log("data " + user);
      this.toVerifyEmail = true;
    })
    .catch(err => console.log(err));
  // console.log(user)
}

更改密码.html

<label for="inputEmail" class="sr-only">Username</label>
<!-- <input type="text" required (keypress)="numberOnly($event)" id="confirmationcode" class="form-control" placeholder="Confirmation Code"  [(ngModel)]="confirmationcode" name="confirmationform" required autofocus> -->
<input
  type="number"
  class="form-control"
  id="exampleInputverifycode1"
  aria-describedby="verifyCodeHelp"
  placeholder="Enter the code"
  #verifycode
/>
<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="New Password"
  [(ngModel)]="newpassword"
  name="loginform"
  required
  autofocus
/>
<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="Confirm New Password"
  [(ngModel)]="confirmpassword"
  name="loginform"
  required
  autofocus
/>
<div class="alert alert-danger" *ngIf="message" role="alert">
  {{message}}
</div>

<button
  class="btn btn-lg btn-primary btn-block"
  (click)="changePw(email,password,username,contactNo)"
>
  Submit
</button>

在忘记密码中，输入用户名，cognito会检查名称是否存在，然后发送OTP。之后更改密码用户必须输入 OTP 来验证、新密码并确认新密码。由于我是 aws-amplify 的新手，请任何人都可以在这里给我建议。

Answer 1

在您的 HTML 中，您通过 [(ngModel] 将两个输入字段绑定到密码变量：

<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="New Password"
  [(ngModel)]="newpassword"
  name="loginform"
  required
  autofocus
/>
<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="Confirm New Password"
  [(ngModel)]="confirmpassword"
  name="loginform"
  required
  autofocus
/>

因此，在您的打字稿文件中，您应该有两个变量：newpassword 和 confirmpassword。这是 ngModel 将与之交互的内容，以使它们更新到用户在输入字段中输入的任何内容。

最后，如果你的 typescript 中已经有这两个，你可以像这样在你的 changePw 函数中使用它：

changePw(email: HTMLInputElement, contactNo: HTMLInputElement, username: HTMLInputElement, password: HTMLInputElement) {
  console.log("changepasswordhere");
  const user = {
    // edited here: use your already existing variable
    password: newpassword,
    attributes: {
      email: email.value
    }
  }
  console.log(user)

  Auth.currentAuthenticatedUser()
    .then(user => {
      console.log("data " + user);
      this.toVerifyEmail = true;
    })
    .catch(err => console.log(err));
  // console.log(user)
}

您可能想检查新密码和确认密码是否相等，但这是您可以采用的一种方法。