Estoy creando un formulario en Angular 2. Mi objetivo es obtener datos de la API y pasarlos al formulario para fines de edición. Sin embargo, me encuentro con este error:

EXCEPCIÓN: No detectado (en promesa): Error: Error en la clase ./EditPatientComponent EditPatientComponent - plantilla en línea: 1:10 causado por: formGroup espera una instancia de FormGroup. Por favor pase uno.

Aquí está el código actual con el error.

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

}

¡Cualquier ayuda / apuntarme en la dirección correcta sería genial! ¡Gracias!

48
JessySue 28 abr. 2017 a las 02:55

3 respuestas

La mejor respuesta

Su patientForm es undefined hasta que se complete el patient en la suscripción. Como tal, está intentando vincular a un valor que no existe en la plantilla en el momento en que se analiza la plantilla.

Agregue un *ngIf para representar el formulario solo cuando el paciente sea veraz, o se instancia el grupo de formularios:

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

Cuando el paciente se completa en la suscripción, existirá la instancia patientForm y la vinculación funcionará. Es un error común cuando se trata de valores asíncronos.

Los formularios no siempre tienen valores iniciales, por lo que también puede verificar la existencia del formulario en sí:

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

La parte importante es que el formulario no se procesa hasta que se instancia.

99
Brandon 19 abr. 2019 a las 13:24

El problema es que su formulario es nulo al principio.

Y solo en ng init tendrás paciencia y luego lo crearás. Debe inicializar su formulario al principio o

<section class="CreatePatient" *ngIf="patientForm">
16
Volodymyr Bilyachat 27 jul. 2017 a las 02:53

Personas que enfrentan problemas con formularios reactivos Primero, en su archivo component.ts, asegúrese de importar lo siguiente:

import { FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

export class NewsfeedformComponent implements OnInit {

NewsfeedForm: FormGroup;
constructor(private _formBuilder: FormBuilder){}

 ngOnInit() {

this.lookupService.getStatus().subscribe((status: IStatus) => {
  this.status = status;
});

this.NewsfeedForm = this._formBuilder.group({
  NewsfeedID: [0,null],
  StatusID: ['', Validators.required],
  publishdate: ['', Validators.required]
  })
 }

}

En su archivo html componente

             <form class="form-container" [formGroup]="NewsfeedForm" 
#newsFeedform="ngForm" (ngSubmit)="form1()">

 <div id="rowTwo" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
                <mat-form-field appearance="outline">
                    <mat-label>Status</mat-label>
                    <mat-select formControlName="StatusID" required>
                        <mat-option></mat-option>
                        <mat-option *ngFor="let itemofStatus of status" [value]="itemofStatus.StatusID">
                            {{itemofStatus.Status}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="publishdate" placeholder="Publish Date"
                        formControlName="publishdate">
                    <mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
                    <mat-datepicker #publishdate></mat-datepicker>
                </mat-form-field>
            </div>
0
MJVM 29 nov. 2019 a las 17:57