Блог

Главная - Вопросы по программированию - Как использовать ngModel из дочернего компонента в родительском компоненте?

Как использовать ngModel из дочернего компонента в родительском компоненте?

#angular

#angular

Вопрос:

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

Но теперь я пытаюсь разделить приложение на несколько дочерних компонентов. При попытке создать дочерний компонент у меня возникает следующая проблема с ngModel.

Я создал дочерний компонент (селектор: app-terms-conditions).

Вот код дочернего компонента:

terms-conditions.component.html

 <card>
    <card-heading>
        <card-heading-body>
            <h4>Header content</h4>
        </card-heading-body>
    </card-heading>
    <card-body>
        Body content
    </card-body>
    <card-footer>
        <checkbox
          id="accept"
          heading="I accept"
          name="accept"
          value="accept"
          [(ngModel)]="chkAcceptTerms"
          required
          #theChkAcceptTerms="ngModel">
        </checkbox>
      </card-footer>
    </card>

Здесь я показываю этот дочерний компонент в родительском компоненте: 

 <accordion-body>
    <app-terms-conditions></app-terms-conditions>
</accordion-body>

В настоящее время я получаю следующую ошибку вterms-conditions.component.html:

Идентификатор ‘chkAcceptTerms’ не определен. Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого элемента

Это всего лишь один из нескольких имеющихся у меня дочерних компонентов.

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

Вот пример некоторого кода в родительском компоненте, который использует этот флажок перед повторным разложением:

 this.postData(this.chkAcceptTerms, ...);

Но я не знаю, должен ли я передавать значения из дочерних компонентов родительскому, или как это вообще сделать, или есть лучший подход?

Может кто-нибудь, пожалуйста, посоветовать мне или, возможно, привести конкретный пример? Любая помощь очень ценится!

Ответ №1:

Я думаю, вам следует использовать Reactive forms в angular. Сначала определите группу форм в сервисе.

 this.formName = this.formBuilder.group({
  chkAcceptTerms: ['']
})

а затем совместно использовать этот сервис для дочерних компонентов:

 <card-footer [form]="formName">
    <checkbox
      id="accept"
      heading="I accept"
      name="accept"
      value="accept"
      formControlName="chkAcceptTerms"
      required>
    </checkbox>
  </card-footer>

Больше информации здесь

Комментарии:

1. Спасибо за ваш ответ. Если я использую этот подход, могу ли я добавить больше дочерних компонентов и просто добавить их formControlName в службу? Т. Е. иметь несколько дочерних компонентов в одной форме

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

3. Отлично, так что, если я перейду на использование реактивных форм. Какие изменения, если таковые имеются, мне нужно было бы внести в этот метод в родительском компоненте: this.postData(this.chkAcceptTerms, ...); ?

4. дополнительная информация здесь: angular.io/guide/reactive-forms#step-1-creating-a-nested-group

5. когда вы хотите получить все значения, вам просто нужно сделать это: this.postData(this.formName.value)