formGroup erwartet eine FormGroup-Instanz: intelligente und dumme Komponente

Question

Ich habe eine reaktive Form, die von einer intelligenten Komponente in eine dumme Komponente geschoben wird, und ich weiß, dass dieser Fehler bedeutet, dass das Formular aus irgendeinem Grund nicht gebunden wird 't herauszufinden, warum ...

Ich habe es mit Augerie betrachtet, und kann das Problem nicht finden. Ich habe meinen Code neu geladen und habe ihn ohne Erfolg erneut bereitgestellt. Ich habe das genau auf eine funktionierende Version gestützt, die ich bereits habe, und finde keine Unterschiede. Ich habe alle Schritte durchlaufen, ich habe die Variable erstellt, die formGroup onInit erstellt, das Formularsteuerelement hinzugefügt, es an die untergeordnete Komponente übergeben, @Input verwendet und die Formularbindung und den formControl-Namen im HTML-Code erstellt.

Liegt es daran, dass das Rendern vor dem Formular gebunden werden kann? Wie repariere ich das?

der vollständige Fehler ist:

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

in meinem stummen Komponente in die erste Zeile von meiner Form zeigt. und

TypeError: Cannot read property 'get' of undefined 

, wenn ich versuche, die Form Zustand im 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

zu lesen

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

Ich denke, es ist darauf zurückzuführen, kein gültiges formGroup Objekt vorhanden zu übergeben, um Ihre stumme Komponente als Eingabe Eigenschaft, während die Smart-Komponente ‚construct'ed ist mit. Versuchen Sie, die formGroup Instanz innerhalb der constructor Ihrer Smart-Komponente instanziieren (derzeit tun Sie es innerhalb der OnInit Hook).

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 
} 

Sehen, ob das Ihr Problem behebt.

Answer 2

Das Problem war, dass ich meine dumme Komponente in meinem Router rendert, nicht meine intelligente Komponente.

dummer Fehler, dauerte Stunden. Danke für die Hilfe Jungs.