Привет!) Есть вопрос по ангуляру(в своем чате его не помогают) Есть

Question

Привет!) Есть вопрос по ангуляру(в своем чате его не помогают) Есть

компонент, который имплементирует ControlValueAccessor. Какой-нибудь datepicker, montpicker, обычный инпут, не суть.

Так как я юзаю bootstrap, то постоянно верстать компоненты в виде:
<div class="form-group>
<label class="control-label"> Первый инпут</label>
<my-input formControlName="firstInput"></my-input>
</div>
<div class="form-group>
<label class="control-label"> Второй инпут</label>
<another-input formControlName="secondtInput"></another-input>
</div>

И так на каждой форме. Ну явно видно дублирование. Хочу сделать некий компонент, например, FormBlockComponent, который будет содержать в себе инпут, label с названием. Но при этом хочется чтобы он тоже реализовал ControlValueAccessor и я мог верстать тупо этими компонентами.

Вопросы, собственно, такие:
1)Применим ли такой подход?
2)Если да, то как сделать этот компонент враппер, чтобы его методы ControlValueAccessor ссылались на методы внутреннего инпута
3) Так как используются реактивные формы, то используется такая конструкция:

<div class="form-group" [class.has-error]="!form.controls['control'].valid && form.controls['control'].touched">....

чтобы красить контрол и метку в красный цвет если оно не валидно и при этом юзер уже взаимодействовал с ним.

При этом эти конструкции аналогично, встречаются почти везде и хочется их не прописывать. Как их убрать? Может директива какая или что-то еще?