kzen.dev
  • Pertanyaan
  • Tag
  • Pengguna
Notifikasi
Imbalan
Registrasi
Setelah Anda mendaftar, Anda akan diberitahu tentang balasan dan komentar untuk pertanyaan Anda.
Gabung
Jika Anda sudah memiliki akun, masuk untuk memeriksa pemberitahuan baru.
Akan ada hadiah untuk pertanyaan, jawaban, dan komentar tambahan.
Lebih
Sumber
Sunting
 JessySue
JessySue
Question

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!

35 2017-04-27T23:55:36+00:00 3
Pemrograman
forms
angular
Solution / Answer
 Brandon
Brandon
28 April 2017 в 12:05
2017-04-28T00:05:13+00:00
Lebih
Sumber
Sunting
#33375221

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

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:

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

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

 Brandon
Brandon
Jawaban edit 19 April 2019 в 1:24
78
0
Kecerdasan buatan untuk mengurai produk dari halaman mana pun
productapi.dev
Volodymyr Bilyachat
Volodymyr Bilyachat
28 April 2017 в 12:05
2017-04-28T00:05:13+00:00
Lebih
Sumber
Sunting
#33375222

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
Volodymyr Bilyachat
Jawaban edit 27 Juli 2017 в 2:53
15
0
Kecerdasan buatan untuk mengurai produk dari halaman mana pun
productapi.dev
Mehdi Jalal
Mehdi Jalal
29 November 2019 в 5:57
2019-11-29T17:57:27+00:00
Lebih
Sumber
Sunting
#33375223

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

             <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
0
Related communities 1
Angular Indonesia
Angular Indonesia
3 371 pengguna
Framework web development aplikasi web dan mobile https://angular.io/ Facebook Group https://www.facebook.com/groups/462764390497214/ Github Repo Angular ID https://github.com/angular-indonesia Medium Angular Indonesia https://medium.com/angularid
Buka telegram
Tambahkan pertanyaan
Kategori
Semua
Teknologi
Budaya / Rekreasi
Kehidupan / Seni
Ilmu Pengetahuan
Profesional
Bisnis
Pengguna
Semua
Baru
Populer
1
Анна Литвиненко
Terdaftar 1 hari yang lalu
2
Inessa bu
Terdaftar 1 bulan yang lalu
3
Denis Babushkin
Terdaftar 1 bulan yang lalu
4
asakuno asakuno
Terdaftar 1 bulan yang lalu
5
aldo salerno
Terdaftar 1 bulan yang lalu
Kecerdasan buatan untuk mengurai produk dari halaman mana pun
productapi.dev
ES
ID
JA
© kzen.dev 2023
Sumber
stackoverflow.com
di bawah lisensi cc by-sa 3.0 dengan atribusi