@Coder321

Кастомные компоненты в форме Angular 2?

У меня есть большая форма, в которой больше 10 инпутов. Можно ли разбить все инпуты на компоненты при этом сохранив функционал FormBuilder ?
Так сейчас:
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
    <div class="inlineBlock">
      <label for="titleInput">Title</label>
      <input type="text" id="titleInput" placeholder="Title" [formControl]="myForm.get('title')" [(ngModel)]="title">
    </div>
    <button type="submit">Submit</button>
  </form>


Так хотелось бы:
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
        <my-title-component></ my-title-component>
    <button type="submit">Submit</button>
  </form>

<!--my-title-component template-->
    <div class="inlineBlock">
      <label for="titleInput">Title</label>
      <input type="text" id="titleInput" placeholder="Title" [formControl]="myForm.get('title')" [(ngModel)]="title">
    </div>
  • Вопрос задан
  • 183 просмотра
Решения вопроса 1
@SergeyBugai
Допустим создаете форм групу с еще одной вложеной групой :
this.myForm= this.fb.group({
      'checboxGroup': this.fb.group({
        'first': [false],
        'second': [false]
      })
    });

А дальше просто передает инпут параметром вложеную групу в ваш компонент :
<my-title-component [checboxGroup]="myForm.controls['checboxGroup']"></ my-title-component>

в my-title-component :
@Input() checboxGroup: FormGroup
Вот и все)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
vitali1995
@vitali1995
Скорее всего, вы не понимаете архитектуру своего приложения. В Angular 2 все самостоятельные участки, которые имеют завершённое назначение и могут использоваться повторно, выносятся в отдельный компонент. Если имеется множество свойств, которые отображаются примерно одинаково, лучше их перебирать в цикле. Если же получается большая форма с уникальными полями, нет ничего плохого в том, чтобы вынести шаблон в один увесистый html файл.
Ответ написан
Разбить-то можно, вот только контролы из вложенных компонентов не будут зарегистрированы в главной форме. Таким образом, валидация, например, работать не будет. И просто так добавить их в форму не получится. Так что либо смиритесь, либо используйте всякие хитрые обходные манёвры. Готового решения я не встречал. Подробнее о проблеме здесь: https://github.com/angular/angular/issues/12504
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы