In Angular-13 I am trying to implement Change Password. It has ASP.NET Core Web API as it's backend.

I have these codes:

auth.service:

mustChangePassword(NewPassword:string, ConfirmNewPassword:string){
  const data = {
    NewPassword:NewPassword,
    ConfirmNewPassword:ConfirmNewPassword
  }
  return this.http.post(this.baseUrl   'auth/change-password', data);
}

component.ts:

export class ChangePasswordComponent implements OnInit {
  changePasswordForm!: FormGroup;
  isLoading = false;
  isSubmitted = false;

  constructor(
    private authService: AuthService,
    private router: Router,
    private toastr: ToastrService,
    private fb: FormBuilder
    ) {
    }

  ngOnInit(): void {
    this.createForm();
  }

  createForm() {
    const formOptions: AbstractControlOptions = { validators: MustMatch('NewPassword', 'ConfirmNewPassword') };
    this.changePasswordForm = this.fb.group({
      NewPassword: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(80)]],
      ConfirmNewPassword: ['', [Validators.required]]
    }, formOptions);
  }

  get f() { return this.changePasswordForm.controls; }

  onSubmit(){
    this.isSubmitted = true;

    // stop here if form is invalid
    if (this.changePasswordForm.invalid) {
          return;
      }

    const formData = this.changePasswordForm.getRawValue();
      const NewPassword = formData.NewPassword;
      const ConfirmNewPassword = formData.ConfirmNewPassword;

    this.isLoading = true;
    this.authService.mustChangePassword(NewPassword, ConfirmNewPassword).subscribe({
      next: (res: any) => {
        this.toastr.success(res.message);
        this.router.navigateByUrl('/auth');
      },
      error: (error) => {
        this.toastr.error(error.message);
      }
    })
  }
}

component.html:

  <div >
    <p >You are only one step a way from your new password, recover your password now.</p>
    <form [formGroup]="changePasswordForm" (ngSubmit)="onSubmit()">
      <div >
        <input type="password" formControlName="NewPassword" placeholder="New Password"  [ngClass]="{ 'is-invalid': isSubmitted && f.NewPassword.errors }" />
        <div >
          <div >
            <span ></span>
          </div>
        </div>
        <div *ngIf="isSubmitted && f.NewPassword.errors" >
          <div *ngIf="f.NewPassword.errors.required">Password is required</div>
          <div *ngIf="f.NewPassword.errors.minlength">Password must be at least 6 characters</div>
          <div *ngIf="f.NewPassword.errors.maxlength">Password cannot be more than 80 characters</div>
        </div>
      </div>
      <div >
        <input type="password" formControlName="ConfirmNewPassword" placeholder="Confirm Password"  [ngClass]="{ 'is-invalid': isSubmitted && f.confirmNewPassword.errors }" />
        <div >
          <div >
            <span ></span>
          </div>
        </div>
        <div *ngIf="isSubmitted && f.ConfirmNewPassword.errors" >
          <div *ngIf="f.ConfirmNewPassword.errors.required">Confirm Password is required</div>
          <div *ngIf="f.ConfirmNewPassword.errors.mustMatch">Passwords must match</div>
        </div>
      </div>
      <div >
        <div >
          <button type="submit"  [disabled]="isLoading">
            <span *ngIf="isLoading" ></span>
            Change password
          </button>
        </div>
        <!-- /.col -->
      </div>
    </form>
    <div >
      <div >
        <a [routerLink]="['/auth']" routerLinkActive="router-link-active" ><i ></i>Login</a>
      </div>
    </div>
  </div>

I got a strange error in the HTML:

Property 'NewPassword' comes from an index signature, so it must be accessed with ['NewPassword']

It highlights NewPassword, required, minlength and maxlength.

I did ['NewPassword'], but error not still resolved.

The same thing happen to 'ConfirmNewPassword'

I've been using this for a long time, why the error now.

How do I resolve this?

Thanks

CodePudding user response：

f['yourFieldName'].errors?.['yourErrorType']

so, for example:

*ngIf="f.ConfirmNewPassword.errors.mustMatch"

becomes:

*ngIf="f['ConfirmNewPassword'].errors?.['mustMatch']"

It's an Angular 13 thingie now.

CodePudding user response：

So in your Html where you are doing f.NewPassword.errors instead of that, do the following (as per your requirement)

f['NewPassword'].errors

f['NewPassword'].errors && f['NewPassword'].errors['required'].