Angular 2 создание реактивных форм с вложенными компонентами

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

<form [formGroup]="myForm">

<textbox-component></textbox-component>

<radioButton-component></radioButton-component>

</form>

И я хочу использовать реактивные формы для создания этой формы, так как хочу html, чтобы быть нетронутым и иметь мои проверки формы только с помощью typescript.

Но я не могу найти какое-либо решение, как мы можем иметь реактивные формы, вложенные с компоненты.

Ответы

Ответ 1

После моих исследований и экспериментов я нашел один ответ на мой вопрос, так что сам ответил. Если это сэкономит время, я буду счастлив.

Если вы хотите создать реактивные формы с вложенными компонентами, вы можете сделать это ниже

Здесь я создаю форму с двумя вложенными компонентами для текстового поля и другими для радиокнопки

Ваш родительский компонент может быть таким

<form [formGroup]="myForm">
    <child-textbox-component [parentFormGroup]="myForm">
    </child-textbox-component>
    <child-radio-button-component [parentFormGroup]="myForm">
    </child-radio-button-component>
</form>

Мы передаем объект FormGroup в качестве входных данных для дочерних компонентов, которые были созданы в родительском компоненте как входные данные для дочерних компонентов, они будут использовать этот объект FormGroup в своих компонент для проектирования конкретного управления классом

Ваши дочерние компоненты будут такими, как

ребенок-TextBox-компонент

<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name"
    [value]="control.defaultValue" [formControlName]="control.name"/>
</div>

ребенок-радио-кнопка-компонент

<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <div>
      <label *ngFor="let value of control.values; let idx = index"
        class="radio-inline" [title]="control.tooltip">
        <input type="radio" [name]="control.name" [formControlName]="control.name"/>
        {{ value }}
      </label>
  </div>
</div>

Здесь элемент управления - это данные для хранения класса модели, которые должны отображаться для этих дочерние компоненты.

Таким образом, вы можете создать свою форму с помощью вложенных компонентов, так что вам не нужно иметь свою форму (можно сказать большую форму) в одиночном компонент. Вы можете разбить его на столько субкомпонентов, легко создавать и поддерживать также использование реактивных форм angular 2. Вы также можете легко добавить проверки.

Я следил за этими ссылками, прежде чем отвечать на этот вопрос

Ответ 2

просто передайте одну или ту же группу подгруппы в блоке формы с привязкой [formGroup].