Question

我正在Angular 2中创建一个表单。我的目标是从API获取数据并将其传递到表单中以进行编辑。但是，我遇到了这个错误：

EXCEPTION：未捕获（在承诺中）：错误：./EditPatientComponent类中的错误EditPatientComponent - 内联模板：1：10引起：formGroup需要一个FormGroup实例。请通过一个。

以下是带有错误的当前代码。

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

}

任何帮助/指向我正确的方向都会很棒！谢谢！

Answer 1

patientForm undefined为patient，直到订阅中的*ngIf为止。因此，您尝试绑定到解析模板时模板中不存在的值。

添加<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>仅在患者真实或表格组实例化时呈现表单：

patientForm

在订阅中填充患者时，<form *ngIf="patientForm" [formGroup]="patientForm" (ngSubmit)="onSubmit()">实例将存在且绑定将起作用。处理异步值时，这是一个常见的“陷阱”。

表单并不总是具有起始值，因此您还可以检查表单本身是否存在：

{{1}}

重要的是，表单在实例化之前不会呈现。

Answer 2

问题是你的表单在开头是空的。

只有在初始化时，您才会耐心等待，然后创建它。您应该在开头或

初始化您的表单

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

Answer 3

面对反应式形式问题的人首先在component.ts文件中，确保导入以下内容：

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

}

在您的组件html文件中

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

Answer 4

我收到了相同的错误，初始化错误，但这是打字错误的结果。

我写的不是ngOnInit，而是写了ngOninit（必须大写I）

但是错误是相同的，组初始化，很难为这类错字错误确定解决方案的时间，所以我认为这将来可能对其他人有用。

Answer 5

当 FormGroup 未初始化时，可能会发生此问题。请在表单标签上添加 *ngIf="patientForm"。

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

Angular 2：formGroup需要一个FormGroup实例。请在

5 个答案: