如何显示在角2

Question

无效字段鉴于“有错误”类：

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

而且我自定义[fieldValidity]指令：

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”标记吧）

Answer 1

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

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

这就是说你可以实现直接在元件上利用ngClass包裹组件。类似的东西：

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

你可以走得更远使用@ContentChild装饰直接引用来自ng-content控制：

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

    @ContentChild(NgFormControl) state; 

    (...) 
} 

这样，您就能够通过这种方式与ngFormControl定义输入（也有ngControl工作）：

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

请参阅本文的更多详细资料（节“对于字段形式组分“）：

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

Answer 2

让您的验证检查验证像显示在https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html或​​和使用指令像下面设置您的自定义类时角套ng-invalid类，或者仅使用ng-invalid类Angular已经设置了，而不是引入一个新的。

@Directive({ 
    selector: 'input' 
}) 
export class AddClass { 
    @HostBinding('class.has-error') 
    hasError:boolean = false; 

    @Input('class') classes; 
    ngOnChanges() { 
    this.hasError = classes.split(' ').indexOf('ng-invalid') >= 0); 
    } 
} 

您需要AddClass指令添加到您想要使用它的组件directives: [AddClass]。

Answer 3

一个简单的方法是使用数据驱动的方法使用[ngClass]指令，如下所示

模板：

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 
    <div class="form-group"> 
     <div [ngClass]="{'has-error': form.controls['description'].invalid}"> 
      <input type="text" formControlName="description" class="form-control" required [(ngModel)]="description"> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-success">Submit</button> 
</form> 

成分：

export class FormComponent implements OnInit { 

    private form: FormGroup; 
    private description: string; 

    constructor(private formBuilder: FormBuilder) { } 

    ngOnInit() { 
    this.form = this.formBuilder.group({ 
     description: new FormControl('') 
    }); 
    } 
}