formControlName в дочернем компоненте

Я хотел бы создать настраиваемый компонент ввода и повторно использовать его в своих формах, но у меня возникла проблема с formGroup и formControlName.

// Form
<form [formGroup]='loginForm'>
  <custom-input [myFormControlName]='email'></custom-input>
</form>

// CustomInput Component's Template
<input formControlName='myFormControlName'>

Проблема, похоже, в том, что formControlName предполагается использовать с директивой FormGroup, и поскольку я использую formControlName в подкомпоненте, он не находит formControlName. Кто-нибудь знает, как обойти это?


angular angular-reactive-forms
person Gabriel    schedule 18.09.2017    source источник

Ответы (4)


arrow_upward
11
arrow_downward

Вам необходимо реализовать средство доступа к контрольному значению в своем дочернем компоненте, подробнее здесь https://blog.oughttram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

person alexKhymenko    schedule 18.09.2017
comment
Спасибо за вашу помощь. У меня есть дополнительный вопрос. Поскольку я хочу использовать довольно простой ввод, мне нужно определить интерфейс ControlValueAccessor или я могу просто использовать DefaultValueAccessor, если да, то как? - person Gabriel; 18.09.2017
comment
Я никогда не пробовал так / обычно использую аксессор управляющего значения. - person alexKhymenko; 18.09.2017
comment
Но вы можете расширить DefaultValueAccessor. componentName расширяет DefaultValueAccessor, и у вас будут все методы от valueAccessor по умолчанию - person alexKhymenko; 18.09.2017
comment
Это старый ответ, но я хочу упомянуть, что добавленная ссылка в качестве ссылки (blog. Хотяtram.io/angular/2016/07/27/) - это другая концепция формы. Пример предназначен для форм на основе шаблонов, а не для реактивных форм, в которых используется formContrlName. Но вопрос о formControlName. - person k.vincent; 17.06.2019

arrow_upward
5
arrow_downward

Как упоминается в статье @ MassimoVariolo, вы можете пройти форма в качестве входных данных для дочернего компонента.

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

<child-component [form]="form"></child-component>

Файл ts дочернего компонента:

@Input() public form: FormGroup;

Дочерний компонент html (вам нужен div с formGroup, иначе вы получите ошибку):

<div [formGroup]="form">
    <input formControlName="myFormControlName"> 
</div>
person Sofia    schedule 15.07.2020

arrow_upward
2
arrow_downward

Я знаю два способа реализации этого поведения: один из них был упомянут Софией в ответе выше, второй подход - передать formControl дочернему компоненту!

Внутри родительского компонента HTML

<child-component
   [control]="parentForm.get('form-control-name-you-want-to-pass-down')">
</child-component>

Внутри child-component

@Input() control: AbstractControl = new FormControl();

Внутренний дочерний компонент HTML

<input [formControl]="control" />
person Gh111    schedule 25.12.2020
comment
Спасибо. Это сработало отлично - person Johansrk; 12.01.2021
comment
Потрясающие. Это решение, которое я искал. передать formControl дочернему компоненту. это сработало. Благодарю. - person Shaiful; 19.07.2021

arrow_upward
0
arrow_downward

Вы можете прочитать эту полезную статью: Использование дочерних компонентов в Angular Формы

Суть решения - передать экземпляр formGroup дочернему компоненту и обернуть его самой formGroup.

person Massimo Variolo    schedule 17.06.2020