如何一次只显示单个验证erorr

Question

我有这个代码在我的表单上显示错误

<input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm">
<div *ngIf='thing.dirty && !thing.valid'>
    <div class="err" *ngIf='thing.errors.required'>
        Thing is required.
    </div >
    <div class="err" *ngIf='thing.errors.invalid'>
        Thing is invalid.
    </div >
</div>

但如果thing有两个错误,则会出现两个错误.比方说,如果我的投入已5 validators使5 divs会显示这是不是很好.如何error div一次只显示一个？

Answer 1

您可以创建自定义管道以获取验证器的errors对象的第一个元素:

@Pipe({
  name: 'first'
})
export class FirstKeyPipe {
  transform(obj) {
    var keys = Object.keys(obj);
    if (keys && keys.length>0) {
      return keys[0];
    }
    return null;
  }
}

这样您就只能显示一个错误:

@Component({
  selector: 'my-app',
  template: `
    <form>
      <input [ngFormControl]="form.controls.input1">
      <div *ngIf="form.controls.input1.errors">
        <div *ngIf="(form.controls.input1.errors | first)==='required'">
          Required
        </div>
        <div *ngIf="(form.controls.input1.errors | first)==='custom'">
          Custom
        </div>
      </div>
    </form>
  `,
  pipes: [ FirstKeyPipe ]
})
export class MyFormComponent {
  constructor(private fb:FormBuilder) {
    this.form = fb.group({
      input1: ['', Validators.compose([Validators.required, customValidator])]
    });
  }
}

请参阅此plunkr:https://plnkr.co/edit/c0CqOGuzvFHHh5K4XNnA ? p = preview .

注意:与Günter同意创建可用组件;-)有关详细信息,请参阅此文章:

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Answer 2

如果您的错误消息块有一致的标记，那么您可以使用 css 仅显示第一条消息并隐藏其余消息：

css

.message-block .error-message {
  // Hidden by default
  display: none;
}
.message-block .error-message:first-child {
  display: block;
}

标记

<div class="message-block">
  <span class="error-message" *ngIf="myForm.get('email').hasError('required')">
    Email is required (first-child of message block is displayed)
  </span>
  <span class="error-message" *ngIf="myForm.get('email').hasError('email')">
    Invalid email format (error message hidden by default)
  </span>
</div>

Answer 3

<input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm">
<div *ngIf='thing.dirty && !thing.valid'>
    <div class="err" *ngIf='thing.errors.required'>
        Thing is required.
    </div >
    <div class="err" *ngIf='!thing.errors.required && thing.errors.ivalid'>
        Thing is invalid.
    </div >
</div>

您可以创建一个可重用的组件来显示错误，这样您就不需要一次又一次地重复此代码。