FormControlName в дочернем компоненте - PullRequest
Новая
       11

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

0 голосов
/ 19 апреля 2019

У меня есть эта FormGroup: 

{
  "action.281": {
    "section.267": {
      "loop.1": {
        "default": {
          "form.885": []
        }
      },
      "loop.2": {
        "default": {
          "form.885": []
        }
      }
    },
    "section.275": {
      "loop.1": {
        "default": {
          "form.891": ""
        }
      }
    },
    "section.276": {
      "loop.1": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
      "loop.2": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
    }
  }
}

И я хочу использовать его из нескольких компонентов (родительский и дочерний компоненты).Это мой родительский HTML-компонент: 

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
      <div *ngFor="let section of sections">
        <app-section [section]="section" [action]="action"></app-section>
      </div>
  </div>
</div>

И мой дочерний HTML-компонент: 

<div class="app-section">
<fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
              <div *ngFor="let question of loop.questions" class="form-group">
                <input class="form-control" [formControlName]="'form.' + question.id" />
              </div>
            </div>
          </fieldset>
       </fieldset>
</div>

Но я получил ошибку "Ошибка ОШИБКИ: не удается найти элемент управления с именем: 'section.267'" и так далее.Как я могу использовать дочерний компонент для связи родительского FormGroup и Parent FormGroupName?

1 Ответ

1 голос
/ 19 апреля 2019

Вы не можете сделать это неявно.Но вы можете явно передать группу форм (или соответствующие дочерние элементы) и использовать ее в качестве входного параметра дочернего компонента:

Parent: 

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
        <div *ngFor="let section of sections">
            <app-section [section]="section" [action]="action"
                         [actionForm]="objectForm.controls['action.' + action.id]">
            </app-section>
        </div>
    </div>
</div>

Дочерний элемент: 

<div class="app-section" [formGroup]="actionForm">
    <fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
                <div *ngFor="let question of loop.questions" class="form-group">
                    <input class="form-control" [formControlName]="'form.' + question.id" />
                </div>
            </div>
        </fieldset>
    </fieldset>
</div>

Это только один дополнительный атрибут на шаблон - и вам необходимо объявить actionForm как параметр @Input дочернего компонента.Сначала это дополнительное объявление может показаться излишним или ненужным.Но необходим для обеспечения того, чтобы дочерний компонент был автономным и предоставлял четко определенный интерфейс.(Поскольку это зависит от него, часть интерфейса компонентов в любом случае является формой. Имеет смысл только сделать эту зависимость явной.)

...