Promise 的拒绝在 angular 2/4 中抛出错误

Question

我定义了一个这样的异步验证器函数。

static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (control.value === 'some_text') {
                resolve({ shouldBeUnique: true });
            }
            reject(null);
        }, 2000);
    });
}

它抛出以下错误（可能在 reject 上）

Cannot read property 'ngOriginalError' of null

如何摆脱这个错误？谢谢

Plnkr : https://embed.plnkr.co/VSHXGKiMGUWEhy8neyXU/

Answer 1

一般来说，如果你拒绝一个 Promise，你最好用 Error

来拒绝它

reject(new Error('User is not vikash (whatever descriptive message what went wrong)'));

EDIT 由于您正在尝试实施异步验证器，因此您需要 resolve 一个带有 null 的 Promise 不拒绝它以表明验证正常。

static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (control.value === 'some_text') {
              resolve({ shouldBeUnique: true });
            } else {
              resolve(null); // resolve
            }
        }, 2000);
    });
}

Demo

Answer 2

在angular表单验证中，当字段有效时，您应该传递null。这有点令人困惑，但事情就是这样。您可以阅读有关 here and here.

的更多信息

我正在附加我从你那里分叉出来的 plunker。我只更改了 null 在提交有效时为 return，在无效时为 ValidationErrors。此外，为了更清楚地了解提交的验证状态，我将其添加到 html 提交的错误对象中。

https://embed.plnkr.co/t0gniM/

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      Please open developer console to chek the exception <br>
      Type anything and click anywhere other than the textbox<br><br>

      <form [formGroup]="formObj">
      <input type="text" id="username" formControlName="username" placeholder="Username" />
      {{formObj.controls['username'].errors|json}}

      </form>
    </div>
  `,
})
export class App {
  name:string;
  shouldBeUnique(control:AbstractControl):Promise<ValidationErrors|null>{
    return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (control.value === 'vikash') {
                  console.log('---matched--');
                    resolve(null);
                }else{
                resolve({ shouldBeUnique: true });
                }
            }, 1000);
        });
  }

  formObj = new FormGroup({
    username: new FormControl('', [
      Validators.required
    ], [
      this.shouldBeUnique
      ])
  });
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

}

@NgModule({
  imports: [ BrowserModule,FormsModule,ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

希望对您有所帮助。

Promise 的拒绝在 angular 2/4 中抛出错误

Promise's reject is throwing Error in angular 2/4

typescript

angular-promise

angular2-forms

angular