Angular 4 - 通过ng-content

Question

我想为表单元素创建自定义样式。因此，我必须为每个输入添加一个父元素并选择元素。父元素将包含样式的CSS类。例如：

<div class="o-form-field is-valid">
  <input formControlName="foo">
</div>
<div class="o-form-field is-invalid">
  <input formControlName="bar">
</div>
<div class="o-form-field has-error">
  <input formControlName="baz">
</div>

我正在寻找一个解决方案，我可以用一个监视子输入状态的组件替换外部DIV，并找出需要哪些类。在其模板中呈现DIV并转换输入元素。所以我的表单模板看起来像这样。

<form-field-container>
  <input formControlName="foo">
</form-field-container>
<form-field-container>
  <input formControlName="bar">
</form-field>
<form-field-container>
  <input formControlName="baz">
</form-field>

我正在使用Reactive表单。