Question

我有这个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有问题，父指令应该知道输入引用名称是什么。如何选择输入并获取参考名称＆＃34; #control＆＃34;并在父组件中使用它以使ngClass正常工作？

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

Answer 1

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

让我们调用组件field。我会这样用它：

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

一开始，组件模板可能如下：

<div class="form-group">
  <label>{{label}}</label>
  <div class="col-sm-9">
    <ng-content ></ng-content>
  </div>
</div>

您需要在组件中定义标签的输入：

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

然后，您需要使用ng-content在@ContentChild中引用与输入相关联的控件：

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

  @ContentChild(NgControlName)
  private control:NgControlName;
}

这样您就可以在组件模板中使用它（control）来检查控件的有效性：

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

使用这种方法，您可以将field组件用于其他输入，而无需重复代码......

请参阅此plunkr：https://plnkr.co/edit/rGpGCnyrEm3Q9Ezbj5em?p=preview。

请参阅此文章（“字段的表单组件”部分以获取更多详细信息：

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

Angular 2高级翻译

1 个答案: