让子进程等待父进程(Make child process wait for parent)

 你也可以实现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/ 
 

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');
  }
}
 
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;
}
 
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;

  (...)
}
 
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/