Как получить доступ к родительскому элементу из внутреннего элемента из группы во вложенных реактивных формах - PullRequest
Новая
       49

Как получить доступ к родительскому элементу из внутреннего элемента из группы во вложенных реактивных формах

0 голосов
/ 20 марта 2019

Я использую реактивные формы с DTO. В этом у нас есть сложная вложенная структура.

Итак, когда мы разрабатываем html, в одном разделе несколько полей из одной формы и несколько полей из другой.

Например. 

this.myForm = fb.group({
    'access_code':['', Validators.required],
    'patinet': fb.group({
        'fullname': ['', Validators.required],
        'gender': [],
        'address': fb.group({
            'street': [''],
            'houseNumber': [''],
            'postalCode': ['']
        })
    })
});

<form [formGroup]="myForm">
  <div class="form-group">
    <label for="fullname">Order</label>
    <input type="text" id="order" formControlName="order" class="form-control">
  </div>       
  <div formGroupName="patient">
    <div class="form-group">
      <label for="street">Fullname</label>
      <input type="text" id="fullname" value="street" formControlName="fullname" class="form-control">
    </div>
    <div class="form-group">
        <label for="street">AccessCode</label>
        <input type="text" id="access_code" value="access_code" formControlName="access_code" class="form-control">
      </div>
    <div formGroupName="address">
      <div class="form-group">
        <label for="street">street</label>
        <input type="text" id="street" value="street" formControlName="street" class="form-control">
      </div>
      <div class="form-group">
        <label for="houseNumber">houseNumber</label>
        <input type="text" id="houseNumber" value="houseNumber" formControlName="houseNumber" class="form-control">
      </div>
      <div class="form-group">
        <label for="postalCode">postalCode</label>
        <input type="text" id="postalCode" value="postalCode" formControlName="postalCode" class="form-control">
      </div>
    </div>
  </div>
</form>

Как вы можете видеть, у меня есть поле access_code внутри раздела формы пациента, но это поле принадлежит родительской форме.

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

Я хочу знать, есть ли способ определить, что конкретное из принадлежит к определенной (в данном случае родительской форме) группе форм?

1 Ответ

2 голосов
/ 20 марта 2019

Так в чем же причина того, что структура модели отличается от структуры HTML-разметки? Если это из-за DTO, то ваш подход неверен. Модель формы не должна отражать модель DTO (как это обычно бывает в формах, управляемых моделью), поскольку вы сможете отображать модель формы и DTO при постобработке. На мой взгляд, это главная причина, по которой он существует - отделить форму от модели данных.

Модель формы должна быть отражена в HTML.

EDIT: В любом случае, если вы хотите пойти по этому пути, вы всегда можете привязать элемент управления формы напрямую - только для этого элемента управления - вместо использования группы / имен форм с использованием [formControl] и FormGroup#get. Более или менее это будет похоже на 

<input [formControl]=this.myForm.get('access_key;');/>

Если у вас нет ссылки на группу форм верхнего уровня, вы можете использовать https://angular.io/api/forms/AbstractControl#parent, чтобы перейти к ней.

...