Question

我有多个输入字段，添加和更改与特定的fieds工作正常，但是当来到错误消息部分时，如果在一个字段中有输入字段eror，则显示在所有其他字段中。但是，我想要为该特定字段显示错误。

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="errorMsg" style="color:red">
        {{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) {
      this.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 {
      this.errorMsg = "Please enter valid URL";
    }
}

这里我没有使用任何表格验证。

Answer 1

获取一个变量，该变量会根据媒体ID 相应地存储line-circle id和相应的显示错误消息。

我指定 media 以便我可以使用 * ngIf
中的this.errorDiv[media._id] = true;;
在HTML中，我使用了 errorDiv 来检查错误消息和特定的ID，并相应地显示错误消息

<强> HTML：

*ngIf="errorMsg[media._id] && (errorDiv[media._id])"

<强>组件：

<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="errorMsg[media._id] && (errorDiv[media._id])" style="color:red"> {{errorMsg[media._id]}} </div> <p > <label *ngIf="media._id" (click)="change($event,media)">Change Link</label> <label *ngIf="!media._id" (click)="change($event,media)">Add Link</label> </p>

Answer 2

尝试将错误消息分别绑定到每个媒体对象：

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";
    }
}

Answer 3

你可以这样做。没有在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>

取自角度official doc

Answer 4

请参阅下面的代码，您将意识到自己的错误。您必须添加仅适用于当前输入的条件。

   <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>

Answer 5

最好是你创建一个自定义验证器检查你的输入，你指向正确的方向，但只是非常简短。创建一个新指令并在您的app模块中提供它。

@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>

我从来没有像这样使用它，但它可能适用于一些小的调整。

编辑：这仅适用于单个输入字段，您可以尝试使用您的数组名称而不是“videourl”，不知道这是如何工作的。

如何使用angular2为该特定输入字段显示错误消息

5 个答案: