Question

我有一个从智能组件推送到哑组件的被动表单，我知道这个错误意味着表单由于某种原因没有受到约束，我只是无法弄清楚为什么......

我用augery看过它，找不到问题。我已经重新加载了我的代码，并且没有运气就重新提供了它。我完全基于我已经拥有的工作版本，并且似乎找不到任何差异。我完成了所有步骤，创建了var，创建了formGroup onInit，添加了表单控件，将其传递给子组件，使用了@Input，并在html中创建了表单绑定和formControl名称。

是不是因为它可以在表单绑定之前进行渲染？我该如何解决这个问题？

完整的错误是：

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

在我的哑组件中指向我表单的第一行。和

TypeError: Cannot read property 'get' of undefined

当我尝试读取html

中的表单状态时

view.ts

import { Observable } from 'rxjs/Observable';
import { Dns } from './../models/network.models';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { NetworkValidator } from './../networkValidator.service';
import { NetworkService } from './../network.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dns-view',
  templateUrl: './dns-view.component.html',
  styleUrls: ['./dns-view.component.css']
})
export class DnsViewComponent implements OnInit {

    dnsForm: FormGroup;
    dnsServers$: Observable<string[]>;

    constructor(private formBuilder: FormBuilder,
                private networkService: NetworkService,
                private networkValidator: NetworkValidator) {}

    ngOnInit() {

        this.dnsForm = this.formBuilder.group({
            ip: [null, Validators.required, this.networkValidator.validateNetwork('ip')]
        });

    }

view.html

<app-dns
    [dnsServers$]="dnsServers$"
    [dnsForm]="dnsForm"
    (addIp)="addIp($event)"
    (deleteIp)="deleteIp($event)"
>
</app-dns>

dumb.ts

import { Dns } from './../models/network.models';
import { FormGroup } from '@angular/forms';
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-dns',
    templateUrl: './dns.component.html',
    styleUrls: ['./dns.component.css']
})
export class DnsComponent {
    // initialize form vars
    @Input() dnsServers$;
    @Input() dnsForm: FormGroup;
    // @Input() editForm: FormGroup;

    @Output() deleteIp: EventEmitter<Dns> = new EventEmitter<Dns>();
    @Output() addIp: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();


}

dumb.html

<div class="title row">
    <div class="col">
        DNS
    </div>
</div>
<div>
    <div class="row">
        <div class="col"></div>
        <div class="server-list col-7">
            <div
                class="server row"
                *ngFor="let server of dnsServers$ | async; let index = index"
            >
                <div class="read row"
                    appListHighlight
                    [index]="index"
                >
                    <div class="col"></div>
                    <div class="col-3">
                        <label for="servers">
                            {{ server }}
                        </label>
                    </div>
                    <div class="col"></div>
                    <div class="col">
                        <div class="x">
                            <i
                                class="fa fa-times-circle"
                                aria-hidden="true"
                                (click)="deleteIp.emit(server)"
                            ></i>
                        </div>
                    </div>
                    <div class="col"></div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <form
        autocomplete="off"
        [formGroup]="dnsForm"
        (ngSubmit)="addIp.emit(dnsForm)"
    >
        <div class="add-server row">
            <div class="col"></div>
            <div class="col-2">
                <label for="add-server">
                    <button class="btn btn-primary" type="submit">
                        Add Server IP
                    </button>
                </label>
            </div>
            <div class="col-5">
                <input
                    type="text"
                    class="form-control"
                    formControlName="ip"
                    placeholder="8.8.8.8"
                >
                <div
                    class="invalid-box alert alert-danger"
                    *ngIf="!dnsForm.get('ip').valid && dnsForm.get('ip').dirty"
                >
                    Invalid IP address
                </div>
            </div>
            <div class="col"></div>
        </div>
    </form>
</div>

Answer 1

我认为这是由于没有一个有效的formGroup对象作为输入属性传递给您的哑组件，而智能组件是“构造”。尝试在智能组件的formGroup内实例化constructor实例（目前您在OnInit挂钩内执行此操作。）

view.ts

export class DnsViewComponent {

 dnsForm: FormGroup;
 dnsServers$: Observable<string[]>;

 constructor(private formBuilder: FormBuilder,
            private networkService: NetworkService,
            private networkValidator: NetworkValidator) {
  this.dnsForm = formBuilder.group({
        ip: [null, [Validators.required, networkValidator.validateNetwork('ip')]]
    }); // 'networkValidator' referenced without 'this.' as it is a constructor argument
 }
// no ngOnInit hook implementation
}

看看是否能解决您的问题。

Answer 2

问题是我在我的路由器中渲染了我的哑组件，而不是我的智能组件。

傻傻的错误，花了我几个小时。感谢所有帮助人员。

formGroup需要一个FormGroup实例：smart和dumb组件

2 个答案: