Angular 角2高级转换

我有一个正常工作的html代码：

<div class="form-group"
     [ngClass]="{'has-error': !control.valid && control.dirty, 'has-success': control.valid && control.dirty}">
    <label class="col-sm-3 control-label">User:</label>
    <div class="col-sm-9">
        <input class="form-control" type="email" id="email"
               minlength="5"
               ngControl="email" #control="ngForm">
        <span class="help-block" *ngIf="!control.valid && control.dirty">
            este campo debe ser mayor que 5
        </span>
    </div>
</div>

我想创建如下组件：

<control-validation>
    <label>User:</label>
    <input class="form-control" type="email" id="email"
                   minlength="5"
                   ngControl="email" #control="ngForm">
    <error-messages>
            <span class="help-block" *ngIf="!control.valid && control.dirty">
                este campo debe ser mayor que 5
            </span>
    </error-messages>
</control-validation>

我对ngClass有一个问题，父指令应该知道输入引用的名称。如何选择输入并获取引用名称控件，并在父组件中使用它，以便ngClass正常工作

---

我接受任何其他解决方案来创建一个组件，该组件根据此css封装任何输入验证。

事实上，我会使用另一种方法。这里具体的是输入。如果您想模块化标签、错误消息和类的重复逻辑，我将创建一个利用Angular2的ng内容的专用组件

让我们调用组件字段。我会这样使用它：

<field label="User">
  <input class="form-control" type="email" id="email"
               minlength="5"
               ngControl="email" #control="ngForm">
</field>

然后，您需要使用@ContentChild引用与ng内容中的输入关联的控件：

这样，您就可以在组件模板中使用it控件来检查控件的有效性：

@Component({
  selector: 'field',
  template: `
    <div class="form-group" [ngClass]="{'has-error': !control.valid && control.dirty, 'has-success': control.valid && control.dirty}">
      <label class="col-sm-3 control-label">{{label}}</label>
      <div class="col-sm-9">
        <ng-content></ng-content>
        <span class="help-block"*ngIf="!control.valid && control.dirty">
          este campo debe ser mayor que 5
        </span>
      </div>
    </div>
  `
})
export class FieldComponent {
  (...)
}

通过这种方法，您将能够将字段组件用于其他输入，而无需复制代码

请参阅以下链接：

有关更多详细信息，请参阅本文“表单组件”一节中的字段：

---

差不多完成了，还有一个细节，可以将变量NgControlName的名称指定为指令属性吗？我的意思是：因为我不想用controlGreat命名所有输入！事实上，在我的回答中，字段组件只是一个表单元素的包装器。也就是说，您可以在component类中使用@Input为组件定义一个参数。类似于：@Input controlName:string；。然后你可以这样使用：很好，谢谢。我是从angular 1.x开始工作的，我在定义angular 2引用名称时遇到了一些问题，看到你的例子，我意识到你可以将引用绑定到控制器，我认为要绑定变量，我必须使用ngModel。我的意思是，我不知道ngModel和references之间的区别是什么…有些东西允许你用以下原则定义一个局部变量。如果元素是HTML，则它对应于dom元素。如果它是一个组件，它对应于组件实例。如果使用值初始化局部变量，它将对应于应用于元素的指令。该值必须是指令名。事实并非如此明显；-对于NgControlName指令，您可以使用ngForm值，因为指令i的导出器具有此名称。。。

@Component({
  selector: 'field',
  template: `
    (...)
  `
})
export class FieldComponent {
  @Input()
  private label:string;
}

@Component({
  (...)
})
export class FieldComponent {
  (...)

  @ContentChild(NgControlName)
  private control:NgControlName;
}

@Component({
  selector: 'field',
  template: `
    <div class="form-group" [ngClass]="{'has-error': !control.valid && control.dirty, 'has-success': control.valid && control.dirty}">
      <label class="col-sm-3 control-label">{{label}}</label>
      <div class="col-sm-9">
        <ng-content></ng-content>
        <span class="help-block"*ngIf="!control.valid && control.dirty">
          este campo debe ser mayor que 5
        </span>
      </div>
    </div>
  `
})
export class FieldComponent {
  (...)
}