如何從 angular 中的表格 object 中獲取驗證錯誤？

Question

我用我的問題做了一個堆棧閃電戰，我用模板來顯示錯誤，當我做 form.errors 它返回 null 即使 form.get('oldPassword').errors 沒有返回 null

編輯
作為獎勵，當我為每個字段定義一個吸氣劑時，我遇到了錯誤

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

編輯

這是我的代碼工作

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，因此視圖不會被告知驗證錯誤。

因此，您應該始終在piping中使用Observables

更新：您的密碼驗證器應如下所示：

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 錯誤 object 不會是 null，僅當 FormGroup 驗證器返回錯誤而不是控件驗證器時。

考慮一個場景，兩個值都可以，但它們的組合不是。 這就是 FormGroup 驗證器可以返回類似 PasswordAndVerificationAreNotEqual 的地方。

選中Get all validation errors from Angular 2 FormGroup以獲取所有表單組錯誤解決方案。

Answer 3

Angular 不會將控制錯誤暴露給 FormGroup https://github.com/angular/angular/issues/10530但它確實為 FormGroup 處理invalid的 state。

為了遞歸地獲取所有錯誤，我會使用一些 function 為您提供，例如：

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 示例

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