Построитель Angular Nested-Form, дающий не удается найти элемент управления с ошибкой пути

У меня есть вложенная форма Angular, которая разделена на вкладки, и каждая вкладка имеет несколько элементов ввода, как в this стекблиц.

Пожалуйста, помогите мне решить следующую проблему:

Error: Cannot find control with path: 'averageBos -> sip5xx -> SIP500 -> avg'

person user3331232    schedule 01.06.2019    source источник
comment
Я только что попробовал ваш пример stackblitz и не получил никаких ошибок... Каков сценарий, когда вы получаете эту ошибку?   -  person miselking    schedule 01.06.2019
comment
@miselking Пожалуйста, проверьте эту ссылку stackblitz stackblitz.com/edit/angular-pr13ls   -  person user3331232    schedule 01.06.2019
comment
Нет элементов управления с именами avg и avg1. Их зовут critical и warning. Поэтому просто переименуйте файл html в critical и warning (или наоборот)...   -  person miselking    schedule 01.06.2019
comment
formControlName используется для тега input, а не для div   -  person HDJEMAI    schedule 01.06.2019
comment
@user3331232 user3331232 Кажется, что в обеих предоставленных вами ссылках нет ошибок. Не могли бы вы добавить исходный HTML-код в сообщение, чтобы другие могли видеть, что было не так до исправления. Я вижу, что вы правильно используете formGroupName для тега div и formControlName для тега ввода, как указано @HDJEMAI   -  person Rov    schedule 01.06.2019
comment
Нет, этого не было в его исходном шаблоне, я исправил это, но, может быть, я или он по ошибке исправил шаблон, где он должен оставить его как есть, как доказательство того, что он не работает. раньше вместо critical стояло arg если я хорошо помню, я пока не могу найти оригинальный stackblitz   -  person HDJEMAI    schedule 01.06.2019


Ответы (1)


Я исправил ваши ошибки:

используйте formGroupName для тега div и formControlName для тега input

<my-tabs>
  <my-tab [tabTitle]="'Tab 1'">
    <form [formGroup]="MyGroup">
      <label>Average MOS</label>
      <div formGroupName="averageMos">
        <input type="text" formControlName="critical">
      </div>
    </form>
  </my-tab>
  <my-tab tabTitle="Tab 2">
    <form [formGroup]="MyGroup">
      <label>Average BOS</label>
   <div formGroupName="averageBos">
     <div formGroupName="sip5xx">
       <div formGroupName="SIP500">
         <input type="text" formControlName="critical">
         <input type="text" formControlName="warning">
       </div>
     <div formGroupName="SIP501">
       <input type="text" formControlName="critical">
       <input type="text" formControlName="warning">
     </div>
    </div>
  </div>
     </form>
  </my-tab>

 </my-tabs>

Попробуйте эту демонстрацию stackblitz.

если вы хотите сделать: formControlName="avg", вам нужно найти этот элемент управления в файле класса.

person HDJEMAI    schedule 01.06.2019
comment
@ user3331232: вы можете подтвердить, работает ли это для вас? - person HDJEMAI; 01.06.2019