2017-12-15 4 views
-1

これまでに私が学んだことから、検証エラーはhtmlで書かれていますが、カスタムエラーを返す方法はありません。たとえば、私はディレクティブ角度指示文からカスタムエラーを返します

@Directive({ 
    selector: '[verifySalaryUp]', // Attribute selector 
    providers: [ 
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => VerifySalaryUpDirective), multi: true } 
    ] 
}) 
export class VerifySalaryUpDirective implements Validator { 

    @Input('status') status: any; 
    @Input('oldSal') oldSalary; 

    constructor() { 
    } 

    validate(control: AbstractControl): {[key: string]: any} { 
    let newSalary = control.value; 
    if (this.status === 'N') { 
     return null; 
    } else { 
     if (Number(newSalary) < Number(this.oldSalary)) { 
     return { 
      lowSalary: { 
      valid: false 
      } 
     } 
     } else { 
     return null; 
     } 
    } 
    } 

} 

以下このHTML部分が

<span *ngIf="salVar.errors.lowSalary">Salary entered cannot be lesser than the previously entered salary.</span> 

を以下のようである。しかし私は何を希望するHTMLで返すことです入力された給与は(数値よりも小さいことができないということですがあります)その値は指令から得ることができるので、

+0

ようなあなたのテンプレートでそれを使用することができますか?あなたはどこに答えを共有するためのリンクがありますか? – ashley

答えて

1

返されるエラーには、必要なデータが含まれている可能性があります。

あなたは

return { 
     lowSalary: { 
     valid: false, 
     oldSalary: Number(this.oldSalary) 
     } 
    } 

を返す場合downvotingだから、なぜあなたはその

<span *ngIf="salVar.errors.lowSalary"> 
    Salary entered cannot be lesser than {{salVar.errors.lowSalary.oldSalary}}. 
</span> 
+0

ありがとう:)うまく動作します – ashley

関連する問題