Блог

Здесь используется Angular 6. У меня есть настройка, как показано ниже:

AppComponent имеет дочерний компонент 0.

У Child0Component есть кнопка, которая открывает модальную загрузку Child1Component.

Наконец, Child1Component имеет выпадающий список и сетку (таблицу) данных.

Пока этот поток работает нормально, без проблем.

Теперь я обернул AppComponent вокруг формы и передал весь экземпляр дочернему компоненту и добавил имя formcontrol и т.д. Но когда я нажимаю на свой модальный, он загружает Child1component и выдает ошибку в консоли как:

 ERROR
Error: Cannot read property 'get' of undefined

ERROR
Error: formGroup expects a FormGroup instance. Please pass one in.
  

Ниже приведен мой соответствующий код:

   <form class="form-horizontal" novalidate [formGroup]="dataForm">
    <div class="row">     
      <child0-app  [dataForm]="dataForm"></child0-app>     
    </div>    
</form>
  

Ниже приведен мой Child1Component select, который, как я считаю, выдает ошибку, потому что, если я прокомментирую это, он будет работать нормально:

  <div class="form-group" [formGroup]="dataForm" >
          <label class="col-sm-1 control-label">Type:</label>
          <select class="form-control input-medium" name="type" formControlName="type"  (change)="onChangeType();">
            <option value=''>-- Select Type --</option>
            <option [ngValue]="d.Id" *ngFor="let d of types">
              {{d.Name}}
            </option>
          </select>
          </div>
  

Я добавил элемент управления формой для выполнения некоторых проверок и т.д., Поскольку у меня было бы больше элементов управления в моих компонентах.

Не уверен, чего здесь не хватает, поскольку я следовал некоторым руководствам, и я считаю, что создал это правильно.

Я также создал демонстрацию, как показано ниже:

Demo: https://angular-modal-form-control.stackblitz.io

Редактировать:https://stackblitz.com/edit/angular-modal-form-control

—Обновлено—

 AppComponent TS
 public dataForm: FormGroup;  

  ngOnInit () { 
     this.dataForm = this.fb.group({});
  }

Child1Component TS

@Input() dataForm: FormGroup;

  

Сначала у вас есть 2 проблемы

1. вам нужно инициализировать свой элемент управления формой следующим образом

   this.DataForm = this.fb.group({ тип: новый FormControl() });

2. Вам необходимо использовать, *ngIf поскольку вы передаете свою форму кросс-компонентам <div class="form-group" [formGroup]="dataForm" *ngIf="dataForm" > , чтобы убедиться, что форма не является начальной до того, как компонент получил объект DataForm от своего родителя.

ОБНОВИТЬ ПРИМЕР stackblitz

ОБНОВЛЕННЫЙ РАБОЧИЙ ПРИМЕР:

рабочий пример

Хорошо, идея, которую вы сделали, что вы следуете этим шагам

• Создать форму в app.component
• Передаю вам для child0.component
• затем вызвать событие по щелчку (click)="openModal()"
• вы создаете bootstrap modal, а затем передаете данные этому модальному
• получить данные из серверной части, затем открыть модальную и передать данные с сервера
• Отсутствует для передачи объекта данных формы dataForm в созданный модальный.

Теперь ваш открытый модальный метод должен работать следующим образом

 openModal() {
this.appService.getAllData().subscribe((data: any[]) => {     

 const initialState = {
  data: data,
  ignoreBackdropClick: true,
  animated: true,
  keyboard: true,
  dataForm: this.dataForm,
  class: 'moal'
};

    this.modalRef = 
    this.modalService.show(Child1Component,{initialState});
});
  

}

Кажется, вам нужно передать ссылку на форму вашему дочернему компоненту при открытии модального:

Child0Component:

  this.modalRef = this.modalService.show(Child1Component,
    { initialState: { data , dataForm: this.dataForm}, ignoreBackdropClick: true, animated: true, keyboard: true, class: 'modal' });
});
  

Поскольку в этой Formgroup вы определили другие элементы управления, такие как formControlName=»type» , это также должно быть определено в вашем файле TS, как показано ниже:

  dataForm : FormGroup;
  and in ngOnInit()
    this.dataForm = this.formBuilder.group({
    type: [null, [Validators.required]],
    });
  

установите для него значение null, если вы не хотите, чтобы какое-либо значение выбиралось в выпадающем списке при загрузке

 <select formControlName= "type"  class="form-control" (change)="selectOption($event.target.value);">
     <option value= "null" disabled selected>Select XXXX</option>
                      <option [value]="t.name" *ngFor="let t of typeList">
                            {{t.fname}} - {{t.description}}
                      </option>
                </select>