演示中的異步窗體組（formGroup需要一個FormGroup實例）

Question

我有一個愚蠢而智能的組件，傳入一個異步的窗體。所以我有一個我傳遞的值：'ready = false'，在異步調用完成時變爲true，以便表單在formGroup填充後呈現。在我將組件邏輯從一個組件分成兩個組件（啞巴和智能組件）之前，這完全奏效。

我不知道是什麼了發生的事情，但我又遇到了錯誤： formGroup expects a FormGroup instance. Please pass one in.

這裏是我的 '啞巴' .TS

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

<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。