0

I have a system where I have a change password component. The problem here is that my URL parameters from resetPW go into the first input field.

when i load the page the params from reset goes into the first input field

This is my 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>

This is my 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);
}

}

This line does puts the url params in the input field for some reason:

this.activatedRoute.queryParams.subscribe(params => {
this.urlParams = params["reset"];
})

I don't understand why this is happening, can someone help?

Omid Nikrah
  • 2,444
  • 3
  • 15
  • 30
Thomas Staal
  • 23
  • 8
  • Probably the parent of `Component.ts` is passing the urls param as input to it. You don't see that happening when you remove the subscription? And probably form group is not required when you aren't using it and using a Template driven form instead. – Ashish Ranjan Sep 28 '18 at 13:56
  • Yes when i remove the subscription, it dosent copy into the input field. i will try to use template driven form instead – Thomas Staal Sep 28 '18 at 14:08
  • Please format your code and include only the minimal part needed to understand the question. do we really need all your functions and validators in order to reproduce it? – Lazar Ljubenović Sep 28 '18 at 14:22
  • @AshishRanjan Its fixed the problem when i just have the template driven form. – Thomas Staal Oct 01 '18 at 06:05
  • 1
    @AshishRanjan Its fixed the problem when i just have the template driven form. – Thomas Staal Oct 01 '18 at 06:05
  • @ThomasStaal: Oh great, so the Reactive form was causing some issue with Template driven.. even when it wasn't used. Nice that you fixed it. – Ashish Ranjan Oct 01 '18 at 07:53
  • @AshishRanjan yes, the Reactive form was causing some interaction with the Template driven form, Thank you for helping out. – Thomas Staal Oct 01 '18 at 12:16

0 Answers0