formGroup ожидает экземпляр FormGroup: умный и тупой компонент

У меня есть реактивная форма, которая перемещается из смарт-компонента в немой компонент, и я знаю, что эта ошибка означает, что форма по какой-то причине не привязана, я просто не могу понять, почему...

Я посмотрел на это с авэри, и не могу найти проблему. Я перезагрузил свой код и безуспешно повторно обслуживал его. Я основывал это точно на рабочей версии, которая у меня уже есть, и не могу найти никаких отличий. Я прошел все шаги, я создал var, создал formGroup onInit, добавил элемент управления формой, передал его дочернему компоненту, использовал @Input и создал привязку формы и имя formControl в html.

Это потому, что он рендерится до того, как форма может быть привязана? Как это исправить?

полная ошибка:

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')]
        });

    }

вид.html

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

тупой.тс

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


}

немой.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>