Hinzufügen einer vordefinierten Validierer zu einer benutzerdefinierten Komponente in Angular

Question

Ich entwickle eine benutzerdefinierte Komponente für die Verwendung mit Formularen in Angular. Ich implementiere die ControlValueAccessor Schnittstelle und es funktioniert großartig.

Allerdings hat meine Komponente keinen Grund, ohne Validator required (es ist ein CAPTCHA) verwendet werden, so dass alle Aufrufe der Komponente required Validator angeben müssen.

Ist es möglich, diesen Validator irgendwie in meine Komponente einzubetten, so wird er immer auf ihn angewendet, wenn er mit ngModel und Formularen (sowohl vorlagenbasierten als auch reaktiven) verwendet wird?

---

Klärung. Betrachten Sie das Beispiel:

<my-captcha [(ngModel)]="firstCaptcha" required></my-captcha> 

<my-captcha [(ngModel)]="secondCaptcha" required></my-captcha> 

<my-captcha [(ngModel)]="thirdCaptcha" required></my-captcha> 

Alle Beschwörungen MyCaptcha Komponente über das required Attribut zu verwenden, um haben für erforderlich Validator Form Steuerung angewendet werden.

Ist es möglich, meinen benutzerdefinierten Controller aufzurufen, ohne das Attribut required explizit anzugeben, aber trotzdem den Validator angewendet haben? Wie folgt aus:

<my-captcha [(ngModel)]="captchaValue"></my-captcha> 

Answer 1

alle Anrufungen des Bauteils muss erforderlich angeben Validator

Dies löste die Idee der Verwendung und abstract class und extend es.

Also, der Weg zu einbetten der required Validator auf alle Ihre Formularkomponenten so etwas wie dies sein könnte:

export abstract class FormValidationClass implements ControlValueAccessor { 
    // Implement your validation methods for your standard form including required validator 

    protected formModel:<any>;   

    protected constructor() { 
    } 

    public requiredValidatorMethod() { 
     // Do stuff here with formModel, for example 
    } 
} 

Und, wo Sie tatsächlich Ihre Komponente erstellen, die ein Formular haben:

export class UserFilter extends FormValidationClass implements OnInit { 

     protected formModel:<any>; 

     this.requiredValidatorMethod (this.formModel); 
} 

Also, solange die Klassen erklären protected formModel und extends FormValidationClass Sie in der Lage sein wird, die Methoden innerhalb 012 zu verwenden,und vermeiden Sie es, für jede Komponente mit einem Formular jedes Mal eine spezifische Logik hinzuzufügen.

Das ist meine Art und Weise von embeding Logik auf alle Komponenten, die eine Form sein würde, in diesem Fall enthalten, betten die required Validator auf alle Komponenten, die Formulare enthalten, die validiert werden müssen.

Hoffe es hilft oder das ist zumindest nützlich! Lass mich wissen wie es geht!

Prost!