Πώς να κάνει το μήνυμα σφάλματος για να εμφανιστεί για το συγκεκριμένο πεδίο συγκεκριμένη είσοδο χρησιμοποιώντας 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>

TS:

    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.

Επεξεργασία: Αυτό είναι μόνο για ένα ενιαίο πεδίο εισαγωγής, σας μπορεί να προσπαθήσει tho να χρησιμοποιήσετε τα ονόματα σειρά σας αντί για «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>

Απόσπασμα από γωνιακή επίσημο έγγραφο