Question

我用模板来显示错误，当我执行form.errors时，尽管form.get（'oldPassword'）。errors不返回null，但它还是返回null

编辑
作为奖励，当我为每个字段定义一个吸气剂时会出现错误

get oldPassword() {
   return this.form.get('oldPassword')
}

编辑

Here is my code working

Answer 1

您的问题是验证器中的setTimeout：

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

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


    }

setTimeout绕过了Angulars ChangeDetection，因此不会向视图通知验证错误。

因此，您应该始终以成角度的角度使用Observables，几乎没有需要诺言的情况...并且通过使用观测值，您可以将检测延迟piping，超时和表单验证应正常工作

更新：您的密码验证器应如下所示：

export class CustomValidators {
    static passwordValidator(control: AbstractControl): Observable<ValidationErrors | null> {
        return of(control.value)
          .pipe(
            debounceTime(2000),
            distinctUntilChanged(),
            map(currentValue => currentValue === "1234" ? { passwordValidator: true } : null )
          )
    }
}

https://stackblitz.com/edit/angular-1su3cm

Answer 2

在此处检查此功能请求：https://github.com/angular/angular/issues/10530

仅当FormGroup验证器返回错误而不是控件验证器时，FormGroup错误对象不会为null。

考虑一个方案，其中两个值都可以，但它们的组合却不能。那就是FormGroup验证器可以返回类似PasswordAndVerificationAreNotEqual的地方。

选中Get all validation errors from Angular 2 FormGroup，以获取所有表单组错误解决方案。

Answer 3

Angular不会向FormGroup https://github.com/angular/angular/issues/10530公开控件错误，但可以处理FormGroup的invalid状态。

为了递归得到所有错误，我将使用类似以下的功能为您提供

：

export function collectErrors(control: any): any | null {
  if (control.controls) {
    return Object.entries(control.controls).reduce(
      (acc, [key, childControl]) => {
        const childErrors = collectErrors(childControl);
        if (childErrors) {
          acc = { [key]: childErrors, ...acc };
        }
        return acc;
      },
      null
    );
  } else {
    return control.errors;
  }
}

然后您可以按以下方式使用它：

onClick() {
  console.log(collectErrors(this.form));
  console.log(this.form.get("oldPassword").errors);
}

Stackblitz Example

Answer 4

请确保我使用nickolaus，应该使用observables，如果您无法重构应用然后再使用它，那就更好了

以html

<div *ngFor="let obj of getErrorList(form.controls)">
      <p>FormGroup errors: {{ obj | json }}</p>
    </div>

在ts

getErrorList(errorObject) {
  let errors = [] ;
  for(let key in errorObject){
    let obj={
      name:key,
      errors:errorObject[key].errors
    }
    errors.push(obj);
  }
  console.log(errors);
  return errors;
}

如何从角度角度的表单对象获取验证错误？

4 个答案: