プレゼンテーション内の非同期フォームグループ（formGroupはFormGroupインスタンスが必要です）

Question

私はダンスマートコンポーネントを持ち、非同期のフォームで渡します。したがって、私は渡す価値があります：非同期呼び出しでtrueになる 'ready = false'が完了し、formGroupが移入された後にフォームがレンダリングされます。これは、コンポーネントロジックを1つのコンポーネントから2つ（ダムとスマート）に分割する前に完全に機能しました。

私はもう何が起こっているのかわからないんだけど、私は再びエラーを取得しています： formGroup expects a FormGroup instance. Please pass one in.

ここでは私の 'ダム' は

import { Country } from './../modules-models/geo-name.models'; 
import { Component, Input, Output, EventEmitter } from '@angular/core'; 
import { FormGroup } from '@angular/forms'; 

@Component({ 
    selector: 'app-geo-drop', 
    templateUrl: './geo-drop.component.html', 
    styleUrls: ['./geo-drop.component.css'] 
}) 
export class GeoDropComponent { 
    @Input() places: Array<Country>; 
    @Input() ready: string; 
    @Input() failed: string; 
    @Input() countriesForm: FormGroup; 
    @Output() toggleAllowed = new EventEmitter<Country>(); 
} 

ダム.htmlを

を.TSです

<div class="geo-list"> 
    <div class="content-box container"> 
     <form *ngIf="ready" [formGroup]="countriesForm"> 
      <div class="place col" *ngFor="let place of places" #holder> 
       <input 
        type="checkbox" 
        formControlName="{{ place.name }}" 
        value="{{ place.allow }}" 
        (change)="toggleAllowed.emit(place)" 
        appSelect="place.allow" 
       > 
       {{ place.name }} | {{ place.code }} | {{ place.continent }} 
      </div> 
     </form> 
     <div *ngIf="failed === 'true'" class="error"> 
      The Request To Server Failed 
     </div> 
    </div> 
</div> 

スマート.TS

import { Countries, Country } from './../modules-models/geo-name.models'; 
import { WhiteListService } from './../geo-drop/white-list.service'; 
import { FormGroup, FormControl } from '@angular/forms'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-geo-drop-view', 
    templateUrl: './geo-drop-view.component.html', 
    styleUrls: ['./geo-drop-view.component.css'] 
}) 
export class GeoDropViewComponent implements OnInit { 
    places; 
    ready = false; 
    failed = false; 
    countriesForm: FormGroup; 

    constructor(private whiteListService: WhiteListService) {} 

    ngOnInit() { 
     // get places list with status' 
     this.whiteListService.getList() 
      .subscribe(
       (response: Countries) => { 
        this.places = response.countries; 
        this.createList(this.places); 
       }, 
       (error) => { 
        console.log(error); 
        this.failed = true; 
       } 
      ); 
    } 

    createList(places) { 
     // assign this.places for dom binding access 
     this.places = places; 

     // create reactive && dynamic form checklist 
     this.countriesForm = new FormGroup({}); 
     for (let i = 0; i < this.places.length; i++) { 
      this.countriesForm.addControl(
       this.places[i].name, new FormControl(this.places[i].allow == 1 ? 1 : 0) 
      ); 
     } 
     console.log(this.countriesForm); 
     this.ready = true; 
    } 

    toggleAllowed(place) { 
     // switch local model of place authorization 
     place.allow == 1 ? place.allow = 0 : place.allow = 1; 

     // send authorization of country to server 
     this.whiteListService.sendAllow(place.code, place.allow) 
      .subscribe(
       (response) => console.log(response), 
       (error) => { 
        console.log(error); 
        // if auth is not sent OK, change local model back 
        // to its original status 
        place.allow == 1 ? place.allow = 0 : place.allow = 1; 
       } 
     ); 
    } 
} 

スマート.htmlを

<app-geo-drop 
    [places]="places" 
    [ready]="ready" 
    [failed]="failed" 
    [formGroup]="countriesForm" 
    (toggleAllowed)="toggleAllowed($event)" 
> 
</app-geo-drop> 

Answer 1

formGroupディレクティブです。この名前を[formGroup]="countriesForm"のコンポーネント入力として使用すると、その要素でコンパイルされます。

子コンポーネントの入力はformGroupであるべきではありません。