angular2 का उपयोग कर कि विशेष रूप से इनपुट क्षेत्र के लिए प्रदर्शित करने के लिए त्रुटि संदेश बनाने के लिए

प्रत्येक मीडिया वस्तु के लिए त्रुटि संदेश बंधन का प्रयास करें:

HTML:

<md-card-content>
  <ul class="listClass">
    <li *ngFor="let media of videos; let i = index ">
      <div>
        <input type="text" name="`media`.`_id`[i]" id="`media`.`_id`[i]" class="form-control form-textbox input-text" [(ngModel)]="media.editText" #editText pattern="/^(ftp|http|https):\/\/[^ ]+$/" style="width: 58%;margin-left: 1%;">
      </div>
      <div *ngIf="media.errorMsg" style="color:red">
        `media`.`errorMsg`
      </div>
      <p class="inputimg" style="float: right;display: inline-block">
        <label *ngIf="media._id" class="img_change" (click)="change($event,media)" style="width: 100px;">Change Link</label>
        <label *ngIf="!media._id" class="img_change" (click)="changetext($event,media)" >Add Link</label>
      </p>
    </li>
  </ul>
</md-card-content>

टीएस:

    change(event: any, media) {
    if (media.editText.indexOf('https://www.youtube.com/embed') != -1) {
      media.errorMsg="";
      if (!media._id) {
        var data:any = {
          pin_id: this.pin_id,
          media_type: "video",
          image_path: media.editText
        } 
        this.ApiService
            .addLinkMedia(data)
            .subscribe(
              media => {
              })
      } else if(media._id) {
        var data:any = {
          media_id: media._id,
          image_path: media.editText
        } 
        this.ApiService
            .addLinkMedia(data)
            .subscribe(
              media => {
                this.loadMedias()
              }, error => {
              })
      }
    } else {
      media.errorMsg = "Please enter valid URL";
    }
}

बेस्ट आप एक कस्टम सत्यापनकर्ता अपने इनपुट की जाँच पैदा करते हैं, तो आप सही दिशा की ओर इशारा कर रहे थे लेकिन बहुत ही संक्षिप्त। एक नया निर्देश बनाएँ और अपने एप्लिकेशन मॉड्यूल में प्रदान करते हैं।

@Directive({
    selector: '[appValidURL]',
    providers: [{provide: NG_VALIDATORS, useExisting: URLValidatorDirective, multi: true}]
})
export class URLValidatorDirective implements Validator {
    @Input('appValidURL') url: string;

    validate(control: AbstractControl): {[key: string]: any} {
        return this.url && this.url.startsWith("https://www.youtube.com/embed") ? {value: control.value}}: null;
    }
}

फिर अपने इनपुट कोड में कुछ इस तरह का उपयोग करें।

<input type="text" name="videourl" id="videourl" class="form-control" required appValidURL [(ngModel)]="media.editText">
<div *ngIf="videourl.invalid && (videourl.dirty || videourl.touched)" class="alert alert-danger">
   <div *ngIf="videourl.errors.required">
        VideoURL is required!
   </div>
   <div *ngIf="videourl.errors.url">
       It must be an embedded youtube video!
   </div>
</div>

मैं इसे इस तरह इस्तेमाल नहीं किया है, लेकिन यह कुछ मामूली tweeks साथ हो सकता है काम करना चाहिए।

संपादित करें: यह केवल एक ही इनपुट क्षेत्र के लिए है, अपने बजाय "videourl" की अपनी सरणी नाम का उपयोग करने यद्यपि कोशिश कर सकते हैं, यकीन नहीं है कि यह कैसे काम करता है।

नीचे दिए गए कोड देखें और आप अपनी गलती का एहसास होगा। आप हालत वर्तमान इनपुट के लिए ही है कि जोड़ना होगा।

   <div [ngClass]="{ 'has-error': form.submitted && !username.valid }">
          <label for="firstName">First Name</label>
          <input type="text" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required />
          <div *ngIf="form.submitted && !firstName.valid">First Name is required  </div>
  </div>
  <div [ngClass]="{ 'has-error': form.submitted && !username.valid }">
          <label for="lastName">Last Name</label>
          <input type="text" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required />
         <div *ngIf="form.submitted && !lastName.valid" >Last Name is required</div>
  </div>

आप इस तरह soething कर सकते हैं। ts फाइल में कुछ भी करने के बिना। आप को मान्य और सत्यापन संदेश सिर्फ प्रपत्र नियंत्रण का उपयोग दिखा सकते हैं।

<input id="name" name="name" class="form-control"
       required minlength="4" appForbiddenName="bob"
       [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
     class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

कोणीय से लिया आधिकारिक दस्तावेज़