it-swarm.com.de

Angular 2: formGroup erwartet eine FormGroup-Instanz. Bitte geben Sie eine ein

Ich erstelle ein Formular in Angular 2. Mein Ziel ist es, Daten von der API abzurufen und zur Bearbeitung an das Formular zu übergeben. Es tritt jedoch der folgende Fehler auf:

AUSNAHME: Nicht abgefangen (in Versprechung): Fehler: Fehler in der ./EditPatientComponent-Klasse EditPatientComponent - Inline-Vorlage: 1: 10 verursacht durch: formGroup erwartet eine FormGroup-Instanz. Bitte geben Sie einen ein.

Hier ist der aktuelle Code mit dem Fehler.

html

<section class="CreatePatient">
    <form [formGroup]="patientForm" (ngSubmit)="onSubmit()">
        <div class="row">
            <div class="form-group col-12 col-lg-3">
                <label for="firstName">First Name</label>
                <input formControlName="firstName" type="text" class="form-control" id="firstName" >
            </div>

        <div class="row">
            <div class="col-12 col-lg-2">
                <button type="submit" name="submit" class="btn btn-block btn-primary">Save</button>
            </div>
        </div>
    </form>
</section>

ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

import { PatientService } from './patient.service';
import { Patient } from './patient';

@Component({
    templateUrl: 'editpatient.component.html'
})
export class EditPatientComponent implements OnInit {
    errorMessage: string;
    id: string;
    editMode = true;
    private patientForm: FormGroup;
    private patient: Patient;

    constructor(
        private patientService: PatientService,
        private router: Router,
        private activatedRoute: ActivatedRoute,
        private formBuilder: FormBuilder) {

        console.log("routes");
        console.log(activatedRoute.snapshot.url[1].path);
    }

    ngOnInit() {
        this.getPatient();
    }

    getPatient() {
            this.patientService.getPatient(this.activatedRoute.snapshot.url[1].path)
            .subscribe(
                patient => {
                    this.id = this.activatedRoute.snapshot.url[1].path;
                    this.patient = patient;
                    this.initForm();
                },
                error =>  this.errorMessage = <any>error);

    }

    onSubmit(form){
        console.log(this.patientForm);
        // Post the API
    };

    initForm() {
        let patientFirstName = '';

        if (this.editMode) {
            console.log(this.patient.firstName);
            console.log(this.patient.lastName);
            console.log(this.patient.participantUuid);
            patientFirstName = this.patient.firstName;
        }

        this.patientForm = new FormGroup({
            'firstName': new FormControl(patientFirstName)
        })
    };

}

Jede Hilfe/Hinweis in die richtige Richtung wäre toll! Vielen Dank!

34
JessySue

Ihr patientForm ist undefined, bis das patient im Abonnement ausgefüllt ist. Aus diesem Grund versuchen Sie, eine Bindung an einen Wert herzustellen, der zum Zeitpunkt der Analyse der Vorlage nicht in der Vorlage vorhanden ist.

Fügen Sie einen *ngIf Hinzu, um das Formular nur zu rendern, wenn der Patient der Wahrheit entspricht oder die Formulargruppe instanziiert ist:

<section class="CreatePatient">
    <form *ngIf="patient" [formGroup]="patientForm" (ngSubmit)="onSubmit()">
        <div class="row">
            <div class="form-group col-12 col-lg-3">
                <label for="firstName">First Name</label>
                <input formControlName="firstName" type="text" class="form-control" id="firstName" >
            </div>

        <div class="row">
            <div class="col-12 col-lg-2">
                <button type="submit" name="submit" class="btn btn-block btn-primary">Save</button>
            </div>
        </div>
    </form>
</section>

Wenn der Patient im Abonnement eingetragen ist, ist die Instanz patientForm vorhanden und die Bindung funktioniert. Es ist ein allgemeines "gotcha", wenn es um asynchrone Werte geht.

Formulare haben nicht immer Startwerte. Sie können also auch überprüfen, ob das Formular selbst vorhanden ist:

<form *ngIf="patientForm" [formGroup]="patientForm" (ngSubmit)="onSubmit()">

Der wichtige Teil ist, dass das Formular erst gerendert wird, wenn es instanziiert ist.

71
Brandon

Das Problem ist, dass Ihr Formular am Anfang null ist.

Und nur auf ng init werden Sie geduldig und erstellen es dann. Sie sollten Ihr Formular am Anfang oder am Ende initialisieren

<section class="CreatePatient" *ngIf="patientForm">
12