如何使用自定义验证的角度反应形式

Question

我已经定义了一个自定义的验证像下面

import { Directive, forwardRef } from '@angular/core'; 
import { NG_VALIDATORS, FormControl } from '@angular/forms'; 

function validateRewardAmountFactory(goalAmount: number, quantity: number) { 
    return (c: FormControl) => { 
    const rewardAmount = c.value; 
    const isValidAmount = rewardAmount * quantity < goalAmount ? true : false; 
    return isValidAmount ? null : { validateAmount: true }; 
    }; 
} 

@Directive({ 
    selector: '[validateAmount][ngControl][validateAmount][ngModel],[validateAmount][ngFormControl]', 
    providers: [ 
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => RewardAmountValidator), multi: true } 
    ] 
}) 
export class RewardAmountValidator { 

    validator: Function; 

    constructor(goalAmount: number, quantity: number) { 
    this.validator = validateRewardAmountFactory(goalAmount, quantity); 
    } 

    validate(c: FormControl) { 
    return this.validator(c); 
    } 
} 

，然后我有我的模块中声明该指令

@NgModule({ 
    declarations: [RewardAmountValidator, ...] 
}) 

现在我想用这个在我的反应形式自定义的验证，我做这样的

return this.fb.group({ 
    'id': [project.id, Validators.required], 
    'type': ['reward', Validators.required], 
    'rewardAmount': ['', validateAmount(this.goalAmount, this.quantity)] 
}); 

}

，但它给我的错误Cannot find name 'validateAmount'

那么，什么是使用自定义验证我的反应形式的正确方法。

Answer 1

试试这个：

return this.fb.group({ 
    'id': [project.id, Validators.required], 
    'type': ['reward', Validators.required], 
    'rewardAmount': ['', Validators.compose(validateAmount(this.goalAmount, this.quantity))] 
});