如何顯示在角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('') 
    }); 
    } 
}