Как правильно добавить пользовательский компонент в FormGroup реактивной формы? - PullRequest
Новая
       38

Как правильно добавить пользовательский компонент в FormGroup реактивной формы?

0 голосов
/ 17 октября 2018

У меня много проблем с использованием formControlName в пользовательском компоненте, упаковывающем mat-select.

Теперь кажется, что мой пользовательский элемент управления не может найти группу форм?Даже если пользовательский элемент вложен в formGroup.

У меня есть StackBlitz

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

<form novalidate [formGroup]="tenantForm">
    <label for="Id">Id</label>: <input class="form-control" formControlName="id" id="Id" name="Id" />
    <custom-component-with-mat-select formControlName="culture" id="Culture" name="Culture"></custom-component-with-mat-select>
</form>

В этом примере поле Id будет работать правильно, но поле Культура жалуется на то, что оно не вложено вFormGroup?

Ошибка: formControlName должно использоваться с родительской директивой formGroup.Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup (вы можете создать его в своем классе).

Как пользовательский компонент должен работать с реактивными формами и группой форм?

Моя первоначальная проблема не заключалась в том, что я не мог импортировать ReactiveFormsModule. Может быть, я забыл импортировать что-то еще раз?

Является ли этот ответ разработанным способом достижения этой цели?Или я упускаю более простое решение?

Нужно ли мне реализовать средство доступа к значению управления?Как объяснено здесь

, просто запутался в спроектированном способе сделать это.

мой компонент обернул матовый материал углового материала, и я думаю, что я также запутался, если бы янужно поместить атрибуты в mat-select или мой компонент реализует средство доступа к значению управления?кажется, ничего не работает.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Я провел некоторое исследование и получил его для работы с аксессором контрольного значения:

https://stackblitz.com/edit/mat-select-with-controlvalueaccessor

0 голосов
/ 17 октября 2018

Control formControlName должно быть строковым значением.

Case 1 

formControlName="animationType"

Это работает, поскольку animtationType здесь является строковым значением.

Case 2 

[formControlName]="'animationType'"

Это ошибка выброса, так как Angular оценивает значение animationType, которое является массивом (определенным в файле ts)

Случай 3 

formControlName="{{animationType}}"

Этосбой по той же причине, что и в случае 2

Fix

Если вы хотите получить доступ к formControlName, используйте строковое значение в ts ex:

** в ts **

public animationControl = "animation";

** в html **

<mat-select name="animationType" [formControlName]="'animationControl'"
...