Родительская/дочерняя форма на основе модели Angular2

Я новичок в Angular2 (beta1) и хотел бы реализовать простую редактируемую сетку, состоящую из двух компонентов. Здесь я использую два компонента поддельных данных, чтобы упростить задачу. Вот они (см. этот плункер: http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI):

  • родительский компонент с именем contact. Скажем, это представляет контакт с именем.
  • дочерний компонент с именем entry. Скажем, он представляет собой запись для контакта, где каждый контакт может включать 0 или более записей. Каждая запись имеет адрес и почтовый индекс.

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

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

  1. Контакт: пользователь редактирует форму, а затем нажимает кнопку отправки, чтобы все сохранить. Таким образом, я могу просто иметь некоторый код, обрабатывающий кнопку отправки и генерирующий событие в качестве вывода компонента. У контакта есть свойство массива entries: таким образом, я могу использовать директиву ngFor в его шаблоне для отображения компонента ввода для каждого из них.

  2. запись: запись имеет свойства addressCtl и zipCtl, которые представляют директивы управления, включенные в ControlGroup, представляющие всю форму. Кроме того, мне нужно, чтобы пара свойств была связана как вход компонента (address и zip), чтобы в родительском шаблоне я мог сделать что-то вроде:

    <tr *ngFor="#e of entries">
  <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
</tr>

Теперь мне не ясно, как формировать отношение между свойствами «модели», представляющими ввод элемента управления, и свойствами директив «формы». Я должен иметь возможность получить значения адреса и почтового индекса от родительского компонента через привязку [...] и передать обновленные значения через событие, запущенное дочерним компонентом (например, размытие?). Имеет ли это смысл в мире NG2? Во всяком случае, мне здесь не хватает части: как я могу связать значения элементов управления формы со значениями свойств модели? Может ли кто-нибудь прояснить это или указать на хорошие документы?


typescript angular forms angular2-forms
person Naftis    schedule 28.01.2016    source источник
comment
почему вы не передали объект e вместо передачи строки? то есть ‹my-entry [entry] = e›‹/my-entry›. затем в вашем компоненте my-entry используйте ng-model для каждого входа. поэтому вы автоматически получаете 2-сторонние привязки.   -  person sdfacre    schedule 29.01.2016
comment
Спасибо, я не думал об этой стратегии. Я сделал новый плункер для заинтересованных читателей по адресу embed.plnkr.co/2y2wew60EJLyu45XxlLg. Пожалуйста, опубликуйте свой комментарий как ответ, чтобы я мог пометить его как ответ.   -  person Naftis    schedule 29.01.2016
comment
Спасибо @Naftis, я сделал это. вы можете отредактировать ответ со своей ссылкой на плункер, если хотите.   -  person sdfacre    schedule 30.01.2016

Ответы (2)


arrow_upward
1
arrow_downward

Просто переместил комментарий, чтобы ответить...

Вы можете передать объект e вместо передачи строки. то есть

<my-entry [entry] = "e"></my-entry>

затем в вашем компоненте my-entry используйте ng-model для каждого входа. поэтому вы автоматически получаете 2-сторонние привязки.

person sdfacre    schedule 29.01.2016
comment
Когда вы указываете объект в качестве значения входного свойства дочернего компонента, мы не получаем автоматическую двустороннюю привязку данных. Что происходит, так это то, что родительский компонент и дочерний компонент теперь имеют свойство, которое указывает на один и тот же/один объект. Это не имеет ничего общего с двусторонней привязкой данных Angular. Это имеет прямое отношение к ссылочным типам JavaScript. - person Mark Rajcok; 11.02.2016
comment
@MarkRajcok, я согласен с тобой. Извините, что я использовал неправильные слова. Это (привязка примитивного типа и/или объекта к области) много раз объяснялось в Angular 1. Мне просто было лень объяснять все это снова. - person sdfacre; 11.02.2016

arrow_upward
2
arrow_downward

На самом деле использование привязки [...] соответствует только односторонней привязке. Когда родительское свойство обновляется в родительском компоненте, значение также обновляется в дочернем компоненте.

Но если вы хотите обновить родительские атрибуты из дочернего, вам нужно использовать события и атрибут @Ouput.

Вот пример с компонентом labels:

export class LabelsComponent implements OnInit {
  @Input()
  labels:string[];

  @Output()
  labelsChange: EventEmitter;

  (...)

  removeLabel(label:string) {
    var index = this.labels.indexOf(label, 0);
    if (index != undefined) {
      this.labels.splice(index, 1);
      this.labelsChange.emit(this.labels);
    }
  }

  addLabel(label:string) {
    this.labels.push(this.labelToAdd);
    this.labelsChange.emit(this.labels);
    this.labelToAdd = '';
    this.addAreaDisplayed = false;
  }
}

Таким образом, вы можете использовать двустороннюю привязку к этому компоненту:

<labels [(labels)]="company.labels"></labels>

Надеюсь, это ответит на ваш вопрос, Тьерри.

person Thierry Templier    schedule 29.01.2016