Нет ошибки доступа к значению при использовании mat-slide-toggle

Question

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

Проблема в том, что при доступе к странице я получаю следующее сообщение об ошибке:

      ERROR Error: No value accessor for form control with unspecified name attribute

В целях тестирования я попытался заменитьmat-slide-toggleс чекбоксом ввода и ошибка уходит, почему ругается с ползунком, не могу понять.

Вот аналогичный пример:

Родительский модуль

      @NgModule({
    ...
    declarations: [ParentComponent],
    imports: [
        ...,
        MatSlideToggleModule,
    ]
})
export class ParentModule {}

Родительский компонент

      @Component({
    selector: 'app-parent',
    template: `
        <form [formGroup]="myFormGroup">
            <app-child-a [subscribedControl]="$any(myFormGroup.controls.myOption)"></app-child-a>
        </form>
    `
})
export class ParentComponent {
    public myFormGroup: FormGroup = this._fb.group({
        myOption: [true, [Validators.required]],
    });

    constructor(private _fb: FormBuilder) {}
}

Дочерний компонент

      @Component({
    selector: 'app-child-a',
    template: `
        <mat-slide-toggle [formControl]="subscribedControl"></mat-slide-toggle>
    `
})
export class ChildAComponent {
    @Input() public subscribedControl!: FormControl;
}

Есть идеи?

Answer 1

Основываясь на том, что вы предоставили, и принимая во внимание, что это не исходный фрагмент, вот несколько вещей, которые нужно проверить:

1. Вы объявляете свой дочерний компонент в своем? Или вы импортируете соответствующий модуль, который его содержит? Потому что в предоставленном фрагменте вы этого не сделаете. (Это, вероятно, вызовет другую ошибку)
2. Вы используете «зарезервированное» имякак имя входного свойства вашего ребенка? Если да, то меняй на что-то другое. Например.

---

С другой стороны, передача самого элемента управления формой не является элегантным решением.

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

Таким образом, вы в основном говорите Angular: «Посмотрите, мой пользовательский элемент управления следует правилам, которым следует любой другой нативный элемент формы. Так что вы можете использовать его в форме».

Если вы реализуете этот интерфейс и предоставляете свой компонент как CVA, вам не нужно передавать управление формой.

Вы можете прочитать подробное объяснение в этой статье .

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