создать дочерний компонент с универсальным formControle

Question

Здравствуйте, я хотел бы создать дочерний компонентный контент для каждого моего formcontrol из большой группы форм.

Поскольку я не могу просто передать форму управления, потому что ему нужна группа форм.

Идея и то, что я попробовал, состоит в том, чтобы внедрить мою группу форм в дочерний элемент и передать также объект параметра json для конфигурации дочернего элемента formcontrol (имя, тип ввода, тип валидатора, ...).

Но каждый раз передавайте formGroup ребенку, чтобы мой рендер отображал слишком много времени для рендеринга.

Но я думаю, что это не очень хорошая практика.

В родительском компе

 <ctrl
    [config]="'name'"
    [form]="form.get('site')"
    [ctrlName]="'ORDER_FORM_NAME'"
    [ctrlError]="'ORDER_FORM_NAME_ERROR'"
  ></ctrl>

дочерний комп html

<form [formGroup]="form">
  <div>
    <label>{{ctrlName}}</label>
    <div>
      <input formControlName="{{config}}" placeholder="{{ctrlName}}">
      <div *ngIf="form.get(config).hasError('required')">
        <span>{{ctrlError}}</span>
      </div>
    </div>
  </div>
</form>

Я видел в stackoverflow несколько случаев создания универсального компонента с помощью инжектора или viewContainerRef, хотя я бы этого не хотел.

Если кто-то может передать мне ссылку или кратко объяснить процесс, это может быть очень полезно.

Answer 1

Вы можете попытаться добавить viewProviders к вашему @Component и создать сервис, содержащий вашу форму, чтобы внедрить ее во все ваши дочерние компоненты:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
})