web-dev-qa-db-fra.com

Angular 2: formGroup attend une instance de FormGroup. S'il vous plaît passer un dans

Je crée un formulaire dans Angular 2. Mon objectif est d'extraire des données de l'API et de les transférer dans le formulaire à des fins d'édition. Cependant, je rencontre cette erreur:

EXCEPTION: Uncaught (promis): Erreur: Erreur dans la classe ./EditPatientComponent EditPatientComponent - modèle en ligne: 1: 10 provoqué par: formGroup attend une instance de FormGroup. S'il vous plaît passer un po.

Voici le code actuel avec l'erreur.

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

}

Toute aide/me diriger dans la bonne direction serait génial! Merci!

formsangular
34
JessySue

Votre patientForm est undefined jusqu'à ce que patient dans l'abonnement soit rempli. En tant que tel, vous essayez de vous lier à une valeur qui n'existe pas dans le modèle au moment de l'analyse du modèle.

Ajoutez un *ngIf pour rendre le formulaire uniquement lorsque le patient est véridique ou si le groupe de formulaires est instancié:

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

Lorsque le patient est rempli dans l'abonnement, l'instance patientForm existera et la liaison fonctionnera. C'est un "gotcha" commun lorsqu'il s'agit de valeurs asynchrones.

Les formulaires n'ont pas toujours de valeurs de départ, vous pouvez donc également vérifier l'existence du formulaire lui-même:

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

L'important est que le formulaire ne soit pas rendu avant son instanciation.

71
Brandon

Le problème est que votre formulaire est nul au début.

Et seulement sur ng init, vous serez patient et ensuite créé. Vous devez initialiser votre formulaire au début ou à la fin.

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