Angular-屬性“NewPassword”來自索引簽名，因此必須使用['NewPassword']訪問它

在 Angular-13 中，我正在嘗試實作更改密碼。它具有 ASP.NET Core Web API 作為后端。

我有這些代碼：

身份驗證服務：

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

組件.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);
      }
    })
  }
}

組件.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>

我在 HTML 中遇到了一個奇怪的錯誤：

屬性 'NewPassword' 來自索引簽名，因此必須使用 ['NewPassword'] 訪問

它突出顯示 NewPassword、required、minlength 和 maxlength。

我做了 ['NewPassword']，但錯誤仍未解決。

同樣的事情也發生在“ConfirmNewPassword”上

我已經用了很長時間了，為什么現在出現錯誤。

我該如何解決這個問題？

謝謝

uj5u.com熱心網友回復：

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

所以，例如：

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

變成：

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

現在是 Angular 13 的東西。

uj5u.com熱心網友回復：

因此，在您正在做的 Html 中f.NewPassword.errors，請執行以下操作（根據您的要求）

f['NewPassword'].errors

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

標籤：

上一篇：當我嘗試使用機器人在Discord上踢某人時出現錯誤

下一篇：Angular13無法擺脫Object是可能的null