如何在 angular 上向反应性 forms 添加特定验证

Question

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

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);
        });


    }
}

这是错误

Answer 1

你有一些问题...

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

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

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

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

如果没有错误，则错误的 rest 与模板中的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>

堆栈闪电战