Eckige reaktive Form - kundenspezifischer Validator

Question

Ich habe eine Anforderung, dass bestimmte Eingabefelder maskiert werden müssen. Beispiel, gewünschter Betrag sollte als $ 44.444 angezeigt werden. Ich kann die Eingabemaskierung erreichen, indem ich eine Textmaske benutze (https://github.com/text-mask/text-mask). Das Problem, auf das ich stoße, ist, dass die Maskierung meine reaktiven Formvalidatoren bricht.

Komponente:

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

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

Vorlage:

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

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

Die Validierer jetzt Kontrolle min und max gegen den maskierten Eingang ($ 44.444) anstelle von (44.444). Gibt es eine Möglichkeit, den Wert vor dem Festlegen im Modell zu formatieren?

Answer 1

Sie müssen einen benutzerdefinierten Validator (Directive) erstellen und alle nicht-numerischen Zeichen entfernen und ein Minimum als Argumente festlegen (oder sie in der Direktive fest codieren ..) und dann die Gültigkeit zurückgeben.

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    
>