मैं कोणीय में एक ही समस्या को कैसे हल कर सकता हूं, एनजी-संदेश AngularJS में हल हो गए हैं?

Question

एंगुलरजेएस में एनजी-मैसेज नामक एक फॉर्म निर्देश था जिसने हमें इसे बनाने में मदद की ताकि सभी फॉर्म त्रुटियों को एक ही समय में दिखाया न जाए। तो उदाहरण के लिए यदि इनपुट में 3 त्रुटियां हैं: आवश्यक, न्यूनतम लम्बाई, अधिकतम लम्बाई। फिर केवल आवश्यक होने के बाद, आवश्यक है, तो minlength दिखाता है। एनजी-संदेशों के बिना हमें केवल कुछ दिखाने के लिए कुछ जटिल और बदसूरत तर्क करने की आवश्यकता होगी, बाकी को नहीं, जबकि यह भी ध्यान में रखना चाहिए कि त्रुटियों को केवल तभी दिखाया जाना चाहिए जब फॉर्म नियंत्रण भी गंदा/छुआ और वैध नहीं है।

AngularJS में यह होगा की तरह कुछ:

<div ng-messages="form.username.$error" ng-if="form.username.$touched || form.username.$dirty"> 
    <div ng-message="required">Please enter a username.</div> 
    <div ng-message="minlength">Username must be at least 3 characters.</div> 
    <div ng-message="maxlength">Username can't exceed 30 characters.</div> 
</div> 

हम कैसे एक सुरुचिपूर्ण ढंग से कोणीय में इस लक्ष्य को हासिल कर सकते हैं?

Answer 1

आप अपने खुद के घटक बना सकते हैं। नीचे मैं एक उदाहरण प्रदान करता हूं (इसे संकलित या चलाया नहीं गया है, लेकिन इसे आपको जाने के लिए पर्याप्त जानकारी देनी चाहिए)। स्पर्श किए जाने पर केवल संदेश दिखाने के लिए तर्क, गंदे, आदि को आसानी से जोड़ा जा सकता है।

प्रयोग

<validation-messages [for]="control"> 
    <validation-message name="required">This field is required</validation-message> 
</validation-messages> 

कार्यान्वयन

import { Component, OnInit, ContentChildren, QueryList, Input, OnDestroy } from '@angular/core'; 
import { FormControl } from '@angular/forms'; 
import { Subscription } from 'rxjs'; 

@Component({ 
    selector: 'validation-messages', 
    template: '<ng-content></ng-content>' 
}) 
export class ValidationMessagesComponent implements OnInit, OnDestroy { 
    @Input() for: FormControl; 
    @ContentChildren(ValidationMessageComponent) messageComponents: QueryList<ValidationMessageComponent>; 

    private statusChangesSubscription: Subscription; 

    ngOnInit() { 
    this.statusChangesSubscription = this.for.statusChanges.subscribe(x => { 
     this.messageComponents.forEach(messageComponent => messageComponent.show = false); 

     if (this.for.status === 'INVALID') { 
     let firstErrorMessageComponent = this.messageComponents.find(messageComponent => { 
      return messageComponent.showsErrorIncludedIn(Object.keys(this.for.errors)); 
     }); 

     firstErrorMessageComponent.show = true; 
     } 
    }); 
    } 

    ngOnDestroy() { 
    this.statusChangesSubscription.unsubscribe(); 
    } 
} 


@Component({ 
    selector: 'validation-message', 
    template: '<div *ngIf="show"><ng-content></ng-content></div>' 
}) 
export class ValidationMessageComponent { 
    @Input() name: string; 
    show: boolean = false; 

    showsErrorIncludedIn(errors: string[]): boolean { 
    return errors.some(error => error === this.name); 
    } 
}