我有一个系统,其中有一个更改密码组件。这里的问题是我的来自 resetPW 的 URL 参数进入了第一个输入字段。
这是我的component.html:
<div class="container">
<h3>Reset Password</h3>
<form (ngSubmit)="resetPassword(f)" #f="ngForm" ngNativeValidate>
<div class="form-group">
<input type="password" minlength="8" class="form-control" placeholder="Nyt
Password" id="newPassword" name="newPassword" [(ngModel)]="newPassword"
charracters minimum required autofocus>
</div>
<div class="form-group">
<input type="password" minlength="8" class="form-control"
placeholder="Gentag Nye Password" id="repeatPassword" name="repeatPassword"
[(ngModel)]="repeatPassword" charracters minimum required autofocus>
</div>
<button class="button" type="submit">Change password</button>
</form>
<br>
<p>{{notChangedPassword}}</p>
</div>
这是我的component.ts:
export class ResetPWComponent implements OnInit {
@Input("newPassword") newPassword;
@Input("repeatPassword") repeatPassword;
notChangedPassword: string;
urlParams;
paramsArray = [];
constructor(private authService: AuthService, private activatedRoute:
ActivatedRoute) {
this.newPassword = new FormGroup({
newPassword: new FormControl("newpassword", Validators.compose([
Validators.required,
Validators.pattern("^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$")
])),
repeatPassword: new FormControl("repeatPassword", Validators.compose([
Validators.required,
Validators.pattern("^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$")
])),
})
this.activatedRoute.queryParams.subscribe(params => {
this.urlParams = params["reset"];
})
this.authService.notChangedPassword.subscribe((data) => {
this.notChangedPassword = data;
})
}
ngOnInit() {
this.paramsArray = this.urlParams.split(".", 4);
}
resetPassword(form: NgForm) {
const token = this.paramsArray[0] + "." + this.paramsArray[1] + ".";
const email = this.paramsArray[2] + "." + this.paramsArray[3];
const newPassword = form.value.newPassword;
const repeatPassword = form.value.repeatPassword;
this.authService.changePassword(token, email, newPassword, repeatPassword);
}
}
出于某种原因,此行确实将 url 参数放在输入字段中:
this.activatedRoute.queryParams.subscribe(params => {
this.urlParams = params["reset"];
})
我不明白为什么会这样,有人可以帮忙吗?