如何在Angular 2中的无效字段上显示“has-error”类 [英] How to show the 'has-error' class on an invalid field in Angular 2

问题描述

鉴于：

<div class="form-group" [fieldValidity]="email">
  <label for="email" class="sr-only">Email</label>
  <input [(ngModel)]="model.email" ngControl="email" required>
</div>

我的自定义[fieldValidity]指令：

And my custom [fieldValidity] directive:

import { Directive, ElementRef, Input } from 'angular2/core';
import {NgControlName} from 'angular2/common';
@Directive({
  selector: '[fieldValidity]'
})
export class FieldValidityDirective {
  private el: HTMLElement;
  @Input('fieldValidity') field: NgControlName;
  constructor(el: ElementRef) { 
    this.el = el.nativeElement;
  }
  private _onValidityChange(value: string) {
    //TODO test field.valid || field.pristine
    if (?) { 
      this.el.classList.remove('has-error');
    } else {
      this.el.classList.add('has-error');
    }
  }
}

我如何订阅field.valid&&字段.pristine值来显示错误？ （我在下面用'TODO'标记了它）

How can I get subscribe to the field.valid && field .pristine values to show the error? (I've marked it with 'TODO' below)

推荐答案

你也可以实现 ngDoCheck 检查有效性的方法：

You could also implement the ngDoCheck method to check the validity:

ngDoCheck(value: string) {
  if (field.valid || field.pristine) { 
    this.el.classList.remove('has-error');
  } else {
    this.el.classList.add('has-error');
  }
}

那说你可以实现一个利用<的包装组件code> ngClass 直接在元素上。类似的东西：

That said you could implement a wrapping component that leverages ngClass directly on the element. Something like that:

@Component({
  selector: 'field',
  template: `
    <div class="form-group form-group-sm" [ngClass]="{'has-error':state && !state.valid}">
      <label for="for" class="col-sm-3 control-label">{{label}}</label>
      <div class="col-sm-8">
        <!-- Input, textarea or select -->
        <ng-content></ng-content>
        <span *ngIf="state && !state.valid" class="help-block text-danger">
          <span *ngIf="state.errors.required">The field is required</span>
        </span>
    </div>
  </div>
`
})
export class FormFieldComponent {
  @Input()
  label: string;

  @Input()
  state: Control;
}

您甚至可以通过直接引用<$ c $中的控件来更进一步c> ng-content 使用 @ContentChild 装饰者：

You can even go further by directly referencing the control from the ng-content using the @ContentChild decorator:

@Component({
  (...)
})
export class FormFieldComponent {
  @Input()
  label: string;

  @ContentChild(NgFormControl) state;

  (...)
}

这样你能用 ngFormControl （也适用于 ngControl ）以这种方式定义你的输入：

This way you would be able to define your input this way with ngFormControl (would also work with ngControl):

<form [ngFormModel]="companyForm">
  <field label="Name">
    <input [ngFormControl]="companyForm.controls.name" 
           [(ngModel)]="company.name"/>
  </field>
</form>

有关详细信息，请参阅此文章（字段的表单组件部分）：

See this article for more details (section "Form component for fields"):

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

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

这篇关于如何在Angular 2中的无效字段上显示“has-error”类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！