Наблюдаемые с вложенной реактивной формой Angular 5 - PullRequest
Новая
       20

Наблюдаемые с вложенной реактивной формой Angular 5

0 голосов
/ 03 июля 2018

У меня есть реактивная форма, подобная этой: 

<form *ngIf="people$ | async;" [formGroup]="applicationForm" (ngSubmit)="submitForm()">

  <person-form
    [parentForm]="applicationForm"
    (added)="addPerson()"
    (removed)="removePerson($event)">
  </person-form>

  <button type="submit">Submit</button>

</form>

И соответствующий класс 

export class FormComponent implements OnInit {
  applicationForm: FormGroup;
  people$: Observable<any>;

  constructor( public peopleService: PeopleService ) {}

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

    this.people$ = this.peopleService.getPeopleData().pipe(
      tap(peopleData => {
        this.applicationForm.setControl('people', this.fb.array(peopleData || []));
      })
    );
  }
}

Я мой ngOnInit. Я получаю данные из сервиса, который предоставляет мне множество людей и отправляет их в applicationForm в качестве элементов управления формы. Проблема возникает, когда я передаю эту applicationForm во вложенную форму в массиве: Вот шаблон вложенной формы: 

<div [formGroup]="parentForm">
  <div formArrayName="people">
    <div *ngFor="let item of people; let i = index;">
      <div [formGroupName]="i">
        <input type="number" formControlName="age" />
      </div>
    </div>
  </div>
</div>

И класс вложенной формы 

export class BorrowerFormComponent {
  @Input() parentForm: FormGroup;
  @Output() added: EventEmitter<any> = new EventEmitter<any>();
  @Output() removed: EventEmitter<any> = new EventEmitter<any>();
  onAdd() {
    this.added.emit();
  }

  onRemove(index) {
    this.removed.emit(index);
  }

  get people() {
    return (this.parentForm.get('people') as FormArray).controls;
  }
}

Я также добавляю и добавляю и удаляю элементы массива, я опускаю это, чтобы сделать код короче Таким образом, Ii показывает мне контроль после длительного периода времени, но также у меня есть ошибка: 

Cannot find control with path: 'people -> 0 -> age'

Я что-то пропустил? Почему он не может найти «люди -> 0 -> возраст»? Это поле 'age' возвращается из сервиса.

1 Ответ

0 голосов
/ 03 июля 2018

Вы не указали "возраст" в форме контроля 

ngOnInit(){

    initGroup() {
        let rows = this.parentForm.get('people') as FormArray;
        rows.push(this.fb.group({
          age: [null, Validators.required],
        }))   
     } 
}
...