CODEWITHSUNDEEP
angular
xasini
xasini

Reputation: 99

How to fetch the value of token from url and assign it to value of input

Currently it doesn't take the value of token input token it just prints '' in the console as I have defined token as token: [''] in the form builder. How should I define it so that it taken the correct value. The whole point of this is eventually to fetch the value of token from mydomain.com/reset-password?token=2724a63c5ab6866ae385ea211cb1 so 2724a63c5ab6866ae385ea211cb1 in this case should be updated in the hidden token input field so it could be sent on form submission to the backend.

html (I am using reactive form here)

<form [formGroup]="resetPassword" (ngSubmit)="onSubmit()">
    <div id="tab-1" class="log-tab-content current">
      <div class="login-form">
        <div class="login-left">
            <input type="text" formControlName="password" name="password" placeholder="Enter New Password *"/>
            <div class="clearfix"></div>
        </div>
        <div class="login-right">
          <input type="text" formControlName="c_password" placeholder="Confirm Password *"/>
          <div class="clearfix"></div>
        </div>
        <input type="hidden" formControlName="token" name="token" value="2724a63c5ab6866ae385ea211cb1d3812696fe574a71817515e50038a0881aa1">
        <div class="clearfix"></div>
        <button type="submit" class="log-button log-button1">Reset Password</button>
      </div>
    </div>
 </form>

Typescript

 constructor(private formBuilder: FormBuilder, private auth: AuthService) { }

  ngOnInit() {
    this.resetPassword = this.formBuilder.group({
      password: ['', Validators.required],
      c_password: ['', Validators.required],
      token: ['']
    })
  }

  onSubmit() {
    this.submitted = true;
    if (this.resetPassword.invalid) {
      return;
  }
  const user = {
    password: this.resetPassword.controls.password.value,
    c_password: this.resetPassword.controls.c_password.value,
    token: this.resetPassword.controls.token.value
  };

  console.log(user);

  this.auth.resetPasswordToken(user).subscribe( (res: any) => {
    if(res) {
     console.log(res);
    }
  },(err)=> {
  if(err) {
    console.log(err);
  }
  });
}

Upvotes: 0

Views: 298

Answers (1)

dileepkumar jami
dileepkumar jami

Reputation: 2265

UPDATED:

Bind an ngModel to your input [(ngModel)]="mytoken" like below. 

<input type="hidden" formControlName="token" name="token" [(ngModel)]="mytoken" value="2724a63c5ab6866ae385ea211cb1d3812696fe574a71817515e50038a0881aa1">
        <div class="clearfix"></div>
        <button type="submit" class="log-button log-button1">Reset Password</button>
        </div>

And in your ts, initialize a variable mytoken and after your subscribe, add the following

  this.auth.resetPasswordToken(user).subscribe( (res: any) => {
    if(res) {
     console.log(res);
     this.mytoken = res; // depends on the response data. It could also be res.token
    }
  },(err)=> {
  if(err) {
    console.log(err);
  }
  });

If you cannot use ngModel on input field based on the version of angular, you can use setValue

  this.auth.resetPasswordToken(user).subscribe( (res: any) => {
    if(res) {
     console.log(res);
     this.resetPassword.controls['token'].setValue(res); // depends on the response data. It could also be res.token
    }
  },(err)=> {
  if(err) {
    console.log(err);
  }
  });

Upvotes: 2

Related Questions