Угловые 2: formGroup ожидает FormGroup экземпляр. Пожалуйста, передайте в

Я создаю форму, в угловых 2. Моя цель-получить данные от API и передать его в форму для редактирования. Однако, я бегу в эту ошибку:

исключение: Неперехваченные (обещанию): ошибка: Ошибка в ./Класс 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>

ТС

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

}

Любая помощь/указывая мне в правильном направлении было бы здорово! Спасибо!

Программирование
forms angular
27-го апреля 2017 в 11:55
17 просмотров
Комментарии к вопросу (3)
Решение

Ваш patientForm это не определено до пациента в подписке заполняется. Таким образом, вы'вновь пытается привязать к значению, которое не'т существуют в шаблоне, когда шаблон парсится.

Добавить *ngIf для отображения формы только тогда, когда пациент находится истина, или группа форма создается:

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

Когда пациента заполняется в подписке patientForm экземпляр будет существовать и привязки будут работать. Это's в общем-то "попался" при общении с async значения.

Формы Дон'т всегда имеют начальные значения, так что вы также можете проверить существование самой формы:

Важной частью является то, что форма-это'т, оказанных до его создания.

Brandon
Редактировал ответ 19-го апреля 2019 в 1:24
Комментарии (7)

Проблема в том, что ваша форма является нулем в начале.

И только на НГ инициализации вы получите пациента и затем создать его. Вы должны инициализировать виде на начало или

<section class="CreatePatient" *ngIf="patientForm">
Volodymyr Bilyachat
Редактировал ответ 27-го июля 2017 в 2:53
Комментарии (1)

Ребята, которые сталкиваются с проблемами с реактивной формы Первый в своем компоненте.файл 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-файл



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

                    Status



                            {{itemofStatus.Status}}





            </div>

</форма>

Комментарии (0)