角反應形式 - 自定義驗證器

我有一個要求，某些輸入字段需要被屏蔽。例如，期望的金額應該顯示爲44444美元。我可以通過使用文本掩碼來實現輸入掩碼（https://github.com/text-mask/text-mask）。我遇到的問題是屏蔽會破壞我的被動式表單驗證器。角反應形式 - 自定義驗證器

組件：

import {WithinLoanRangeDirective} from './within-loan-range.directive' 

this.applicationForm = this.fb.group({ 
    desiredAmount: ['', [Validators.required, WithinLoanRangeDirective] ] 
})

模板：

<input 
[textMask]="{mask: numberMask}" 
mdInput 
formControlName="desiredLoanAmount 
type="tel"    
> <!--type tel to pop numpad--> 

<div> {{ applicationForm.controls['desiredLoanAmount'].hasError('withinLoanAmountRange')}}</div>

的驗證們正在檢查，而不是（44444）最小值和最大值對蒙面輸入（$ 44444）。在將模型設置爲模型之前是否有格式化該值的方法？

來源

2017-07-27 Anthony

您需要創建一個自定義驗證器（指令）並去除所有非數字字符並將最小最大值設置爲參數（或者在指令中硬編碼它們），然後返回有效性。

https://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

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

@Directive({ 
    selector: '[ngModel][withinLoanAmountRange], [formControl][withinLoanAmountRange]', 
    providers: [ 
     { 
      provide: NG_VALIDATORS, 
      useClass: WithinLoanRangeDirective, 
      multi: true, 
     } 
    ] 
}) 
export class WithinLoanRangeDirective implements Validator { 
    constructor() { 
    } 
    validate(c: FormControl) { 
     let loanValue = c.value.replace(/\D/g,''); 

     return (loanValue >= 1000 && loanValue <= 20000) ? null : { 
      withinLoanAmountRange: { message: 'Loan Needs to be between 1 and $5k' } 
     }; 
    } 
} 




<input 
[textMask]="{mask: numberMask}" 
withinLoanAmountRange 
mdInput 
formControlName="desiredLoanAmount    
>

來源

2017-07-27 21:05:01 wesside

如何獲取withinLoanAmountRange.message回到模板？認爲我錯過了一些東西來獲得這種連線。我在「let loanValue」之後放置了一個console.log（loanValue），並且在輸入時沒有任何內容被打印到控制檯。 – Anthony

模板中的applicationForm .controls ['desiredLoanAmount'] .hasError（'withinLoanAmountRange'））' – wesside

或者，您可以將指令導入組件，並將其添加到驗證程序數組中，而不是在模板中。 – wesside

角反應形式 - 自定義驗證器

回答

相關問題