Angular 8: вложенная реактивная форма в подкомпоненте не работает - PullRequest
Новая
       6

Angular 8: вложенная реактивная форма в подкомпоненте не работает

0 голосов
/ 15 февраля 2020

Я использую Angular 8 Вложенную Реактивную Форму в дочернем компоненте, но она не работает. Я искал официальную документацию Angular, но не могу найти никакого примера по этому вопросу.

Мое решение доступно на stackblitz.com . Я не могу показать companyName для каждой компании и детали адреса для каждого адреса. Есть идеи?

По словам Кара Эриксонс говорит о «Angular формах» на Angular Connect 2017 , это должно быть прямо вперед ...

Ее видео Вложенные формы в Angular между 35: 31-36: 51

In parent.component. html

<form [formGroup]="form">

    <div *ngFor="let address of addresses">
        <app-child [address]="address"></app-child>
    </div>

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

</form>

In parent.component.ts 

export class ParentComponent implements OnInit {

  form = new FormGroup({});

  addresses : Address[] = [
    new Address("Street 1", "City 1"),
    new Address("Street 2", "City 2"),
    new Address("Street 3", "City 3"),
  ]

  constructor() { }

  ngOnInit() {
  }
}

В child.component. html

<div formGroupName="address">

     <input formControlName="street">
     <input formControlName="city">

</div>

В child.component .ts 

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.less']
})
export class ChildComponent implements OnInit {

  @Input() address: Address;
  form: FormGroup;

  constructor(parent: FormGroupDirective) {
    this.form = parent.form;
  }

  ngOnInit() {
    this.form.addControl('address', new FormGroup({
      street: new FormControl()
      city: new FormControl()

    }));
  }
}

Ответы [ 2 ]

0 голосов
/ 15 февраля 2020

Вы забыли добавить родительскую FormGroup для viewProviders в ваш дочерний компонент? Как это: 

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.less'],
  viewProviders: [
    {
      provide: ParentComponent,
      useExisting: FormGroupDirective
    }
  ]
})
0 голосов
/ 15 февраля 2020

Попробуйте передать форму formGroup в качестве входных данных вместо использования конструктора в дочерний компонент. 

@Input() formGroup: FormGroup;

вместо 

constructor(parent: FormGroupDirective) {
  this.form = parent.form;
}

Отредактировано 02/15/2020

Я изменил код и решил вашу проблему. Решение доступно здесь: https://stackblitz.com/edit/angular-vyaj57-kgkdih

...