我有这个验证器：

export const PasswordsEqualValidator = (): ValidatorFn => {

  return (group: FormGroup): Observable<{[key: string]: boolean}> => {

    const passwordCtrl: FormControl = <FormControl>group.controls.password;
    const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain;

    const valid = passwordCtrl.value.password === passwordAgainCtrl.value.passwordAgain;

    return Observable.of(valid ? null : {
      passwordsEqual: true
    });
  };
};

以这种形式使用：

public signupForm: FormGroup = this.fb.group({
    email: ['',Validators.required],passwords: this.fb.group({
      password: ['',passwordAgain: ['',Validators.required]
    },{validator: CustomValidators.passwordsEqual()})
  });

使用它的模板的一部分：

<div formGroupName="passwords">
  <div[ngClass]="{error: !signupForm.get('passwords').valid}">
    <labelfor="password">Password</label>
    <inputid="password" formControlName="password" type="password">
  </div>
  <div[ngClass]="{error: !signupForm.get('passwords').valid}">
    <labelfor="password-again">Password again</label>
    <inputid="password-again" formControlName="passwordAgain" type="password">
  </div>
</div>

问题是,即使密码匹配,它仍然显示错误.我看了很多不同的类似问题,但大多数人都有点混乱和过时,所以我想写一个更清洁的解决方案.

我猜测只需要一个小调整,但我似乎无法弄明白.

试试这个,因为你需要比较2值并且验证器不是异步验证器,你只能返回boolean而不是Observable

export const PasswordsEqualValidator = (): ValidatorFn => {

  return (group: FormGroup): boolean => {

    const passwordCtrl: FormControl = <FormControl>group.controls.password;
    const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain;

    const valid = passwordCtrl.value === passwordAgainCtrl.value;

    return valid ? null : {
      passwordsEqual: true
    };
  };
};

顺便说一下,使用这种方法进行最佳实践：

export const PasswordsEqualValidator = (): ValidatorFn => {

  return (group: FormGroup): boolean => {

    const passwordCtrl: FormControl = group.get('password');
    const passwordAgainCtrl: FormControl = group.get('passwordAgain');

    const valid = passwordCtrl.value === passwordAgainCtrl.value;

    return valid ? null : {
      passwordsEqual: true
    };
  };
};

这里演示：http://plnkr.co/edit/9PzGSIuBhvNz0fpJxTlS?p=preview

如果我在Angular 5模板中执行此操作：

{{0.7 | percent:'1.2-5'}}

我按预期得到了这个：70.00％

但是,当我这样做时：

{{0.07 | percent:'1.2-5'}}

我得到7.00000％而不是预期的7.00％

我只是做错了什么或者这是Angular中的一个错误？

看起来像 DecimalPipe的错误,因为 PercentPipe使用它进行格式化.简单删除maxFractionDigits,它是分数后的最大位数(默认为3),可以获得所需的结果：

{{0.7 | percent:'1.2'}} --> 70.00%
{{0.07 | percent:'1.2'}} --> 7.00%

如果我使用ng2 http提供程序Observable.toPromise()支持调用promise启用方法,它按预期工作,但当我将它作为promise链的一部分使用时,它会在then处理程序处理完并返回结果之前解析返回的promise.

使Observable.toPromise()在promise链中工作的任何已知问题或我可能测试的替代方法使其成为与promise链兼容的结果？在http请求,promise链中的最后一项,已完成其异步请求并返回结果之前,我被此解析承诺阻止.

例如

this.myService.getSomethingInvolvingingMultiplePromiseCalls().then(result => {
    let valueFromSomethingInvolvingMultiplePromiseCalls = result;
},err => { 
    console.error('landed in app.component outer promise rejected handler,see output window for details')
})

public getSomethingInvolvingingMultiplePromiseCalls(): Promise<string> {
    return this.getSomethingInvolvingPromiseCall().then(resultPromise1 => {
        let resultPromise1propertyFoo = resultPromise1.propertyFoo;
            return this.getSomethingInvolvingNg2HttpProviderToPromiseCall(resultPromise1propertyFoo);
        }
        .then(resultPromise2 => {
            let resultPromise2propertyBar = resultPromise2.propertyBar;
            return resultPromise2propertyBar;
        }   
    }

getSomethingInvolvingNg2HttpProviderToPromiseCall(arg1: string): Promise<string> {
   let body = 'some body content Leveraging arg1';
   let headers = new Headers({ 'Authorization': 'Bearer ' + accesstoken,'Content-Type': 'application/x-www-form-urlencoded' });
   let options = new RequestOptions({ headers: headers });

   return this.http.post(resourceBaseAddress + '/someRestApi',body,options).toPromise().then(response => {
        let responseJson = response.json();
        return responseJson['someJsonProperty'];
      });
    }
}

提前感谢任何见解或建议.

我找到了解决方法.

它涉及创建和返回一个typescript延迟的promise,我控制解析只有在我使用angular2 http provider toPromise()调用then方法调用方法时才解析.

我没有与其他承诺链接方案有什么关系,但无论出于何种原因,在这种情况下允许停放方法调用方,直到完成链中的http提供者toPromise()调用.

public getSomethingInvolvingingMultiplePromiseCalls(): Promise<string> {
    let resolveFn,rejectFn;
    let promise = new Promise((resolve,reject) => { resolveFn = resolve; rejectFn = reject; });

    this.getSomethingInvolvingPromiseCall().then(resultPromise1 => {
        this.getSomethingInvolvingNg2HttpProviderToPromiseCall(resultPromise1).then(resultPromise2 => resolveFn(resultPromise2));
    }

    return promise;  // return the promise for outside callers to wait on
}