Пропустить до содержимого
angular challenges logo Angular Challenges

🟠 Control Value Accessor

Испытание #41

Создано Stanislav Gavrilov

Информация

Цель этого испытания создать пользовательское поле формы, которое использует API формы Angular через ControlValueAccessor. Документацию можно посмотреть здесь. Этот интерфейс критически важен для создания пользовательских элементов управления формами, которые могут беспрепятственно взаимодействовать с API форм Angular.

Пояснение

Задача - использовать контрол в feedbackForm напрямую, чтобы убрать необходимость в использовании @Output для получения значения из app-rating-control и установки его в FormGroup. Кроме того, вы должны добавить валидацию для нового элемента управления, чтобы гарантировать наличие данных о рейтинге. (Кнопка отправки формы должна быть отключена, если форма недействительна).

Сейчас компонент рейтинга используется следующим образом:

<app-rating-control (ratingUpdated)="rating = $event"></app-rating-control>
rating: string | null = null;
onFormSubmit(): void {
this.feedBackSubmit.emit({
...this.feedbackForm.value,
rating: this.rating, // not inside the FormGroup and no validation
});
}

Необходимо, чтобы компонент можно было использовать так:

<app-rating-control [formControl]="feedbackForm.controls.rating"></app-rating-control>

Контрибьюторы

Спасибо всем контрибьюторам которые помогли сделать эту документацию лучше!

  • stillst