Angular - 属性“NewPassword”来自索引签名，因此必须使用 ['NewPassword'] 访问它

Question

在 Angular-13 中，我正在尝试实现更改密码。它以 ASP.NET Core Web API 作为后端。

我有这些代码：

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 class="card-body">
    <p class="login-box-msg">You are only one step a way from your new password, recover your password now.</p>
    <form [formGroup]="changePasswordForm" (ngSubmit)="onSubmit()">
      <div class="input-group mb-3">
        <input type="password" formControlName="NewPassword" placeholder="New Password" class="form-control" [ngClass]="{ 'is-invalid': isSubmitted && f.NewPassword.errors }" />
        <div class="input-group-append">
          <div class="input-group-text">
            <span class="fas fa-lock"></span>
          </div>
        </div>
        <div *ngIf="isSubmitted && f.NewPassword.errors" class="invalid-feedback">
          <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 class="input-group mb-3">
        <input type="password" formControlName="ConfirmNewPassword" placeholder="Confirm Password" class="form-control" [ngClass]="{ 'is-invalid': isSubmitted && f.confirmNewPassword.errors }" />
        <div class="input-group-append">
          <div class="input-group-text">
            <span class="fas fa-lock"></span>
          </div>
        </div>
        <div *ngIf="isSubmitted && f.ConfirmNewPassword.errors" class="invalid-feedback">
          <div *ngIf="f.ConfirmNewPassword.errors.required">Confirm Password is required</div>
          <div *ngIf="f.ConfirmNewPassword.errors.mustMatch">Passwords must match</div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <button type="submit" class="btn btn-primary btn-block" [disabled]="isLoading">
            <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
            Change password
          </button>
        </div>
        <!-- /.col -->
      </div>
    </form>
    <div class="row">
      <div class="col-6">
        <a [routerLink]="['/auth']" routerLinkActive="router-link-active" class="text-center"><i class="fa fa-lock mr-2"></i>Login</a>
      </div>
    </div>
  </div>

我在 HTML 中遇到了一个奇怪的错误：

属性 'NewPassword' 来自索引签名，因此必须使用 ['NewPassword'] 访问它

它突出显示 NewPassword、必需、最小长度和最大长度。

我做了 ['NewPassword']，但错误仍未解决。

同样的事情也发生在“ConfirmNewPassword”上

我用了很久了，怎么现在报错。

我该如何解决这个问题？

谢谢

Answer 1

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

所以，例如：

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

变成：

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

现在是 Angular 13 的东西。

Answer 2

因此，在您正在执行 f.NewPassword.errors 的 Html 中，请执行以下操作（根据您的要求）

f['NewPassword'].errors

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