Угловая реактивная форма связывания не работает - PullRequest
Новая
       82

Угловая реактивная форма связывания не работает

0 голосов
/ 12 декабря 2018

Я пытаюсь создать здесь вложенные реактивные формы: https://stackblitz.com/edit/angular-mgrfbj

Это иерархия проекта: 

---create company form (hello.component.ts)
    --- company details form (company-details.component.ts)
    --- [
        employee details form (employee-details.component.ts)
        employee details form
        employee details form ...
        ]

Для таких вложенных форм я должен использоватьViewProviders и FormGroupDirective, как указано в этом видео :

Первая вложенная форма ( company-details.component.ts ) работает должным образом

Но вторая форма, которая добавляется с *ngFor внутри FormArray, не привязывается к FormGroupDirective правильно.

При вводе данных о компании и нажатии Печать Json , тогда напечатанный json будет правильным.Но когда вы добавляете одного или двух сотрудников, сведения о сотрудниках в json не печатаются.

Я знаю, что есть другие способы ручного решения этой задачи, но я ищу чистое решение, которое простоработает без каких-либо дополнительных функций.

Любая помощь будет по достоинству оценена!

Заранее спасибо

1 Ответ

0 голосов
/ 12 декабря 2018

необходимо внести несколько изменений в ваш код

1.-Employed.details.component.html 

<!---see that is [formGroup], not formGroupName-->
<div [formGroup]="employee">
  <h4 class="row">Employee no. {{index+1}}</h4>
  <div class='col-md-8'>
    <input formControlName="name" placeholder="Name">
  </div>
  <div class='col-md-8'>
    <input formControlName="planet" placeholder="Planet">
  </div>
</div>

2.- used.details.component.ts,становится как 

  employee: any;
  @Input() index;
  //inject the ForumGroupDirective in the variable fgd    
  constructor(private fb: FormBuilder,
              private fgd: FormGroupDirective) {}

  ngOnInit() {
    //get the FormArray of "employees"
    const array=(this.fgd.form.get('employees') as FormArray);

    //Simple push to the array
    array.push(this.fb.group({
      name: '',
      planet: ''
      }));
    //the formGroup must be array.at(index)
    this.employee = array.at(this.index)
  }

Наконец, при удалении сотрудника необходимо удалить элемент в массиве 

  removeEmployee() {
    this.employeesCount -= 1;
    (this.form.get('employees') as FormArray).removeAt(this.employeesCount);
  }

, см. stackblitz

...