Для пользовательских компонентов формы возможно ли использовать DefaultValueAccessor вместо ControlValueAccessor?

Question

Мне нужно иметь возможность использовать директиву formControlName для моего пользовательского компонента.

Я читал несколько SO вопросов о реализации ControlValueAccessor для дочернего компонента, и все это кажется очень хрупким.

Во многих примерах элементы <div> или <span> преобразуются в элементы формы, и поэтому имеет смысл реализовать все функции, ожидаемые ControlValueAccessor.

Однако мой компонент использует только собственный элемент <input>. Я создаю отдельный компонент, потому что я хочу использовать некоторые значки с вводом, и я, очевидно, не хочу копировать / вставлять значок CSS везде.

Я столкнулся с классом DefaultValueAccessor, который, похоже, используется angular для всех собственных элементов ввода. Могу ли я использовать это поведение для своего пользовательского компонента?

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

Редактировать

Вот фрагмент кода <jg-search> (мой пользовательский компонент):

<div>
    <svg>
        <!-- some content -->
    </svg>
    <label for="search">Search</label>
    <input id="search" type="text"></input>
    <svg>
        <!-- some content -->
    </svg>
</div>

Я хочу иметь возможность просто назвать это так в форме: <jg-search formControlName="keyword">.

Это возможно путем реализации ControlValueAccessor в SearchComponent. Но так как я просто использую нативный <input type="text">, я не хочу переопределять функциональность, уже определенную в DefaultValueAccessor.

Answer 1

Одним из возможных решений может быть использование атрибута ngDefaultControl в пользовательском компоненте:

<div [formGroup]="form">
    <jg-search formControlName="x" ngDefaultControl></jg-search>
                                   ^^^^^^^^^^^^^^^^
</div>

Теперь все, что вам нужно сделать, это связать элемент input с существующим FormControl следующим образом:

@Component({
  selector: 'jg-search',
  template: `
   <input [formControl]="ngControl.control">
  `
})
export class MyInput {
  constructor(public ngControl: NgControl) {}
}

Подробнее о деталях см. Ng-run Пример