Угловой входной компонент (оболочка для классов ошибок)

Question

У меня есть простой, но все же очень сложный вопрос, который, я думаю, должен быть в документации / примерах Angular.

При создании Angular Reactive Forms вы в конечном итоге делаете много:

<input type="text" formControlName="firstName" [ngClass]="{'is-invalid': form.controls['firstName'].errors && (form.controls['firstName'].touched || form.controls['firstName'].dirty) } >

так что вы хотите обернуть угловой компонент для ввода формы

сейчас..

Как создать компонент ввода ReactiveForms, который просто оборачивает собственный ввод HTML, чтобы я мог добавить свои классы проверки?

Некоторые условия:

• Просто простая обертка вокруг нативного элемента формы
• контроль реактивной формы должен перейти к компоненту
• ошибки должны быть в своем собственном компоненте
• ts lint должен пройти
• npm run build --prod должен строить без ошибок
• Нет инструмента ControlValueAccessorпотому что это уже элемент Native Form

Я попробовал это:

 <custom-input [control]="form.get('firstName')" customType="text"></custom-input>
 <show-errors [control]="form.get('firstName')"></show-errors>

шаблон:

<input type="text"
      [attr.id]="customId"
      *ngIf="customType == 'text'"
      class="form-control {{ customClass }}"
      [formControl]="control"
      placeholder="{{ customPlaceholder }}"
      [ngClass]="{'is-invalid': control.errors && (control.touched || control.dirty) }"
      #text>

Но тогда у вас есть эти проблемы:

1) Цлинт:

<custom-input [control]="form.get('contactDetails').get('firstName')"

Я получаю эту ошибку tslint:

Call expressions are not allowed in templates except in output handlers

Поэтому я переписал все, чтобы:

form.controls['contactDetails'].controls['firstName']

Но это дало мне npm buid --prod

Property 'controls' does not exist on type 'AbstractControl'.

Так что это лучший способ создать <input type> фантик?