Angular 2: formGroup mengharapkan sebuah instance FormGroup. Silakan masukkan satu di

Saya membuat formulir di Angular 2. Tujuan saya adalah mendapatkan data dari API dan meneruskannya ke dalam formulir untuk tujuan pengeditan. Namun, saya mengalami kesalahan ini:

EXCEPTION: Uncaught (dalam janji): Kesalahan: Error di ./EditPatientComponent class EditPatientComponent - inline template:1:10 disebabkan oleh: formGroup mengharapkan sebuah instance FormGroup. Tolong masukkan satu.

Berikut adalah kode saat ini dengan kesalahan.

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

}

Setiap bantuan / menunjuk saya ke arah yang benar akan sangat bagus! Terima kasih!

Pemrograman
forms angular
27 April 2017 в 11:55
2 tayangan
Larutan

patientForm Anda tidak terdefinisi sampai patient dalam langganan diisi. Dengan demikian, Anda mencoba mengikat nilai yang tidak ada di templat pada saat templat diurai.

Tambahkan *ngIf untuk merender formulir hanya ketika pasien adalah benar, atau grup formulir telah dibuat:

<section class="CreatePatient">

        <div class="row">
            <div class="form-group col-12 col-lg-3">
                First Name
                <input formControlName="firstName" type="text" class="form-control" id="firstName" >
            </div>

        <div class="row">
            <div class="col-12 col-lg-2">
                Save
            </div>
        </div>

</section>

Ketika pasien diisi dalam langganan, instance patientForm akan ada dan pengikatan akan bekerja. Ini adalah "gotcha &" umum ketika berhadapan dengan nilai async.

Formulir tidak selalu memiliki nilai awal, jadi Anda juga dapat memeriksa keberadaan formulir itu sendiri:

Bagian yang penting adalah bahwa form tidak dirender sampai form tersebut dibuat.

Brandon
Jawaban edit 19 April 2019 в 1:24
Komentar (7)

Masalahnya adalah bahwa formulir Anda nol di awal.

Dan hanya pada ng init Anda akan mendapatkan pasien dan kemudian membuatnya. Anda harus menginisialisasi form Anda di awal atau

<section class="CreatePatient" *ngIf="patientForm">
Volodymyr Bilyachat
Jawaban edit 27 Juli 2017 в 2:53
Komentar (1)

Teman-teman yang menghadapi masalah dengan form reaktif Pertama dalam file component.ts Anda, pastikan Anda mengimpor yang berikut ini:

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

}

di file html komponen Anda



 <div id="rowTwo" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">

                    Status



                            {{itemofStatus.Status}}





            </div>
Komentar (0)