javascript - 如何在 Angular 上向 react 形式添加特定验证

Question

我正在尝试根据特定错误呈现一个 div，我的表单可以工作，但有问题并且会出现类型错误，“undefined is not an object”，我不明白为什么；有人可以帮助我了解我所缺少的吗？我已经尝试通过仅使用 .errors 属性来简化我的代码，它消除了错误，但它不够具体，因此它知道根据表单状态呈现什么错误，任何见解都会非常有帮助:)

HTML

    <form  [formGroup]="form">
    <div class="spacer">
  <label for="oldPassword">Old Password</label><br /><input
    type="text"
    class="form-control"
    id="oldPassword"
    formControlName="oldPassword"
  />
      <div class="alert alert-danger" *ngIf="form.get('oldPassword').errors.passwordValidator">Duplicate Password</div>
      <div class="alert alert-danger" *ngIf="form.get('oldPassword').touched && form.get('oldPassword').errors.required">Old Password is Required</div>
      <div *ngIf="forms.get('oldPassword').pending">Loading...</div>
</div>
<div class="spacer">
  <label for="newPassword">New Password</label><br /><input
    type="text"
    class="form-control"
    id="newPassword"
    formControlName="newPassword"
  />
  <div *ngIf="form.get('newPassword').touched && newPassword.invalid" class="alert alert-danger">New Password is Required</div>
</div>
<div class="spacer">
  <label for="confirmPassword">Confirm Password</label><br /><input
    type="text"
    class="form-control"
    id="confirmPassword"
    formControlName="confirmPassword"
  />
  <div *ngIf="confirmPassword.touched && confirmPassword.invalid" class="alert alert-danger">Confirm Password is Required</div>
</div>
  <button class="btn btn-primary" (click)="onClick()">Submit!</button>
</form>

{{ oldPassword | json}}

TS:

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormControl,} from '@angular/forms'
import { CustomValidators } from '../passwordValidator';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
form = new FormGroup({
  oldPassword: new FormControl('',Validators.required, CustomValidators.passwordValidator),
  newPassword: new FormControl('',Validators.required),
  confirmPassword: new FormControl('',Validators.required)

})

onClick() {
  console.log(this.form.get('oldPassword').errors)
}
}


//CustomValidators.passwordValidator

自定义验证器.TS

import { AbstractControl, ValidationErrors, } from '@angular/forms';


export class CustomValidators {
    static passwordValidator(control: AbstractControl): Promise<ValidationErrors | null> {

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (control.value === "123") {
                    resolve({ passwordValidator: true })
                }
                resolve(null)
            }, 2000);
        });


    }
}

Here is the error

Answer 1

你有一些问题......

• <div *ngIf="forms.get('oldPassword').pending">Loading...</div> , 删除 s来自 forms
• <div *ngIf="confirmPassword.touched && confirmPassword.invalid"无效
• *ngIf="form.get('newPassword').touched && newPassword.invalid"无效
• 您的自定义异步验证器应作为第三个参数放置
• 那些undefined问题源于 errors正在null

建议:使用FormBuilder而不是调用 new FormControl() ，但我会将我的示例与您当前的代码一起保留。通常我们也使用 ngSubmit而不是表单中的点击事件。

所以首先将异步验证器放在正确的位置:

oldPassword: new FormControl(
  "",
  [Validators.required],
  [CustomValidators.passwordValidator]
),

其余错误与errors有关如果没有错误，则在模板中为 null ...您正在调用的地方，例如...

*ngIf="form.get('oldPassword').errors.passwordValidator"

您可以通过添加安全导航运算符来解决此问题:

*ngIf="form.get('oldPassword').errors?.passwordValidator"

这行得通，但我使用以下方式，在我看来这种方式更好更直观:

*ngIf="form.hasError('passwordValidator', 'oldPassword')"

所以这是您的代码的精简版本:

<form [formGroup]="form" (ngSubmit)="onClick()">
  <label for="oldPassword">Old Password</label><br />
  <input formControlName="oldPassword" />
  <div *ngIf="form.hasError('passwordValidator', 'oldPassword')">
    Duplicate Password
  </div>
  <div *ngIf="form.get('oldPassword').touched && form.hasError('required', 'oldPassword')">
     Old Password is Required
  </div>
  <div *ngIf="form.get('oldPassword').pending">Loading...</div>
  <button type="submit" [disabled]="!form.valid">Submit!</button>
</form>

STACKBLITZ