Возникла проблема с регистрацией contorl с формой в Angular Reactive Form

Я работаю над формами Angular Reactive. Изначально у меня есть formarray в formgroup. после этого я помещаю группу форм в массив форм, чтобы динамически добавлять элементы управления формой. У меня возникает проблема при привязке этого элемента управления с помощью formControlName. Я получаю эту ошибку: не удается найти элемент управления с помощью пути: 'controlArray -> 0 -> значение'

вот мой код класса компонента:

ngOnInit(){
        this.reviewForm = this.fb.group({            
            'controlArray': new FormArray([])
        });        
        this.showDefaultForm();                     
    }

Сначала я получаю данные в formsDb, затем ищу в них последнюю заданную форму по умолчанию.

showDefaultForm(){
        for(let form of this.formService.formsDb){
            if(form.formName==this.formService.defaultForm.formName){
                this.selectedForm = form;
                this.addForm();
            }
        }     
    }


addForm(){            
        for (let control of this.selectedForm.controlsArr){                              
            (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group([{
                controlType: control.controlType,
                label: control.label,               
                value: ''
            }])); 
        }        
    } 

Вот мой код шаблона:

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>               
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <div [formGroupName]="i">
          <table>
            <tr>
              <span *ngIf="control.value">
                  <td> 
                    <label>{{control.value.label}}</label> 

              </td>
              <td><span *ngIf="control.value.controlType == 'select'">                
                    <md-select placeholder="{{control.value.label}}" formControlName="value">
                      <md-option *ngFor="let option of control.value.options; let j=index" 
                      [value]="option">{{control.value.options[j]}}</md-option>                  
                    </md-select>
                  </span></td>
              <td> <span *ngIf="control.value.controlType == 'text'">
            <md-form-field class="example-full-width">
              <input mdInput type="text" placeholder="{{control.value.placeholder}}" formControlName="value" >
            </md-form-field>  
        </span></td>                           
              </span>
            </tr>
          </table>
        </div>
      </div>      
    </div>
    </span>
  </div>
</form>

Есть ли проблема в моем коде шаблона, пожалуйста, помогите. Спасибо


person Waleed Shahzaib    schedule 11.12.2017    source источник
comment
Что есть в переменной this.selectedForm?   -  person Pramod Patil    schedule 11.12.2017
comment
он имеет данные формы, то есть имя формы и элементы управления формой. Его класс: экспортный класс FormData {constructor (public formName: String, public controlsArr: Control []) {}}   -  person Waleed Shahzaib    schedule 11.12.2017
comment
что такое this.showDefaultForm()?   -  person AJT82    schedule 11.12.2017
comment
Я редактировал это в вопросе. Пожалуйста, взгляните на это.   -  person Waleed Shahzaib    schedule 11.12.2017
comment
@ AJT_82 Помогите пожалуйста, жду вашего ответа.   -  person Waleed Shahzaib    schedule 11.12.2017
comment
Почему вы используете здесь массив this.fb.group([{?   -  person yurzui    schedule 11.12.2017
comment
Я тоже столкнулся с той же проблемой. Может ли кто-нибудь помочь в этом. Это моя ссылка на переполнение стека, stackoverflow.com/questions/51054638/   -  person vishnu    schedule 28.06.2018


Ответы (3)


Измените это условие ниже на динамическое значение. Поскольку предоставленная вами информация минимальна. Давайте попробуем это ниже и проверим, решается ли проблема или нет.

{{control.value[i].controlType}}
person Pramod Patil    schedule 11.12.2017
comment
Подскажите, пожалуйста, куда добавить эту строчку? - person Waleed Shahzaib; 11.12.2017
comment
Проверить HTML-страницу. Вы определили это - person Pramod Patil; 11.12.2017
comment
Я просто добавил строку {{control.value [0] .controlType}}, чтобы проверить, поступают ли данные в шаблон, это не условие. - person Waleed Shahzaib; 11.12.2017
comment
Вы заменили [0] на [i]? - person Pramod Patil; 11.12.2017
comment
да, пробовал и это. Я думаю, что проблема связана с привязкой formControlName, ошибка говорит: Не удается найти элемент управления с путем: 'controlArray - ›0 -› value', здесь значение - это имя элемента управления, которое я присваиваю formControlName. - person Waleed Shahzaib; 11.12.2017
comment
Я также столкнулся с аналогичной проблемой, не могли бы вы помочь с этим. Моя ссылка на переполнение стека, https://stackoverflow.com/questions/51054638/dynamically-adding-form-fields-using-angular-formarray - person vishnu; 28.06.2018

Я думаю проблема в этой строчке

<div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index"> 

Пожалуйста, поменяйте это на

<div *ngFor="let control of reviewForm.controls.controlArray.controls; let i = index">

И чем вы можете работать со значениями: reviewForm.controls.controlArray.controls[i].controlType или используя formControlName.

Извините, если я неправильно понял вашу проблему. Полагаю, эта статья будет вам полезна. https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

person theykillimmortal    schedule 11.12.2017
comment
Оба подхода хороши. В любом случае спасибо за ваш отзыв. - person Waleed Shahzaib; 14.12.2017

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

   addForm(){
      for (let control of this.selectedForm.controlsArr) {
        (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group({
          controlType: control.controlType,
          label: control.label,
          value: ''
        }));
      }
    }
person chinaski    schedule 27.06.2018