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>();
}

dumb .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>

smart .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;
                }
        );
    }
}

smart .html

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

Answer 1

formGroup是一个指令。在[formGroup]="countriesForm"中使用此名称作为组件输入会导致在元素上对其进行编译。

子组件中的输入不应命名为formGroup。

演示文稿中的异步表单组（formGroup需要一个FormGroup实例）

1 个答案: